CSP: any way to prevent inline scripts dynamically created by a trusted external script?

Let’s say I have a simple web application which uses a single JavaScript (JS) file, loaded from its own domain, and has implemented the restrictive Content Security Policy (CSP) of default-src 'self'. There’s a stored XSS in it whereby the JS file will make an Ajax call to an API which would return some content stored in a database, and that content (which came from untrusted user input) has inline JavaScript in it. The JS file creates an element in the page’s document and sets its HTML content to the retrieved content. Let’s assume that this is the necessary way of doing what it needs to do, and let’s assume that sanitising/encoding the input is unfeasible. I know that user input should always be sanitised, just for the purposes of this question, skip this suggestion as a solution.

Is there any way to set a CSP such that this inline JavaScript, dynamically put onto the page by trusted JavaScript, is blocked?

Here’s a minimal working example (you may need to serve it from a simple HTTP server, e.g. php -S localhost:58000, rather than loading as an .html file)


<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <meta http-equiv="Content-Security-Policy" content="default-src 'self'">     <script charset="utf-8">       console.log('script') // blocked, OK     </script>     <script src="csp-test.js" charset="utf-8"></script>   </head>   <body>     <img src="x" onerror="console.log('img')"/> <!-- blocked, OK -->   </body> </html> 


console.log('trusted ext script') // executed, OK i = document.createElement('img') i.src = 'y' i.addEventListener('error',   function(){ console.log('img by trusted ext script'); }) // executed, HOW TO BLOCK THIS? document.body.append(i) 


enter image description here

Imagify / Image Optimization for theme inline div background?

I’m using the imgaify plugin to serve webp images. Using their plugin a normal tag ends up looking like this:

<picture class="attachment-large size-large wp-post-image"> <source type="image/webp" srcset="https://.../image.jpg.webp 870w, https://.../image-300x128.jpg.webp 300w" sizes="(max-width: 870px) 100vw, 870px"> <img width="870" height="372" src="https://.../img.jpg" alt="Questions? We Can Help" srcset="https://.../image.jpg 870w, https://.../image-300x128.jpg 300w" sizes="(max-width: 870px) 100vw, 870px"> </picture> 

This works fine and well for normal img tag replacement. Here is where i am running into issue:

On some of the pages, my custom theme grabs the featured image and sets this image to the background of a DIV inline with CSS. No optimization is applied here heavily weighing down the page size.

I’m unsure what the best approach would be to fix this:

  1. Create a custom function that returns the optimized jpg/png version of the featured image and return that?

  2. Create a custom function that will spit out the webp version of the file (does one exist?) then use something like monderizr to detect webp support and display the correct styles?

I’m not currently using modernizr so adding another script may outweigh any speed gains. Is there a simpler solution?

Here is how my theme generates the code for the featured image:

<?php if ( has_post_thumbnail() ) : ?> <div class="innerpage-banner" style="background:url(<?php $  src = wp_get_attachment_image_src( get_post_thumbnail_id( $  post->ID ), 'full', false ); echo esc_url( $  src[0] ); ?>) no-repeat; background-size:cover; background-position: center center;"> <?php else: ?>     ... <?php endif; ?> 

Validity of in-line help content over time as users graduate from novice to Intermediate stages

This is a question in regards to an Enterprise product.

Consider a selection menu –

Option 1

help text (2 liner max)

Option 2

help text (2 liner max)

Option 3

help text (2 liner max)

Notes –

1) This help text was added below the Options as there was feedback from new users that the Option Label itself was not sufficient to communicate the intent of the option.

2) Advanced users have come back saying that they do not need to see the help text every time as they are well aware of the options. This is very much understandable.

Questions –

Our product has both ends of the user expertise spectrum fairly distributed. Also, let’s note that users graduate overtime. A tooltip cannot be used as we have seen very less usage of the same and creates extra friction for new users, compared to immediate help. Considering that standard interaction design principles recommend designing for the ‘Intermediate User’ (Alan Cooper, Dan Normal) – is tooltip the only way out? Or are there other thoughts?

Please advice. Thanks!

¿Que tipo de cajas son los flex-items? ¿Se pueden considerar un tipo de caja como block inline e inline-block?

Los elementos inline no pueden tener un width y height definido pero en un flex-container si defino un height,padding y margin a un elemento inline estos son si aplicados.

Se puede condiderar a un flex-item como un tipo de caja en el que el padding,margin,width,height y border de los elementos son respetados?

Cuando digo que si se pueden considerar un tipo de caja me refiero a que si flex-item podría considerarse como si fuese un valor de display solo que definido por el container y no de forma autónoma

.flex-container{   height: 200px;   background: pink;   display: flex; } .flex-item{   background-color: blue;   padding: 50px;   color: white; }  .flex-item:nth-child(2){   background-color: orange;   width: 500px;   padding: 100px; }
<div class="flex-container">   <span class="flex-item">1</span>   <span class="flex-item">2</span> </div>

Ad in E-mails and Inline Contextual Ads questions

I want to clarify some info before the purchase.
1) Do you have a schedule of e-mails topics and free dates for the ad at the bottom? What are the characteristics of your e-mail base? Age, GEO, sex etc. What are the e-mail open rate and the size of the base?
2) Do you have any cases with a results of such ad?
3) Where I can find additional info about Contextual Ads questions and cases in this field as well?

Should password fields be blanked when inline validation fails?

This question with a similar name refers to registration, but in my case, I would like to address submission.

My use cases are:

  • A login form consisting of an email address.
  • A change password form where the user enters his new password twice to change his password.


  • The user has javascript enabled, so we can use AJAX and perform inline form validation. There is then no security risk of sending the password back to the users to re-render the form.

The password field can fail for several reasons:

  1. In the login form, the password is blank or the password/email combination is incorrect.

  2. In the change password form, the password does not meet password requirements (minimum length, etc).

  3. In the change password form, the repeated password does not match the password.

  4. In the change password form, a blank password field exists.

Currently, I have the following behavior:

  • In the change password field, once the password is successfully changed, the passwords fields are blanked out as there is no point keeping them around, and we prepare “clean” fields in case the user wants to change the password again.

Should I also blank the fields for the other failure modes? For example, when using change password fields and setting a password like “123456” and the form returns “You need to have at least a letter in your password”, I could just go the beginning of both builds and add “a”, resulting in “a123456”. This probably defeats the purpose of secure passwords, but it is a lot faster than typing “a123456”.

Are there any established guidelines for this?

Sharepoint: inline image in email

I am unable to add inline images in an email. The mail just show a square having a red cross inside it.

Is there a way to add inline images to email which needs to be sent from SharePoint.


public static void SendMail(tenantContext,)   {             Microsoft.SharePoint.Client.Utilities.Utility.SendEmail(tenantContext, new Microsoft.SharePoint.Client.Utilities.EmailProperties()             {                 From = from,                 To = email.to,                 Subject = "subject",                 Body = "hi <img src='image1.png'>",             });             tenantContext.ExecuteQuery();                  } 

Changing a slideshow to display all images in-line on smaller screens/mobile

Hello, I have a photography portfolio that I set up years ago to show each gallery as a near full screen slideshow. At one point, I figured out how to adjust it for mobile and smaller window sizes, to disable the slideshow and instead show the images all at once in a vertical line.

I ended up disabling that option for a while because I was having some issues with the menu overlapping on specific tablets, but now I want to implement it again and can't figure out where I backed up that code…

Changing a slideshow to display all images in-line on smaller screens/mobile

Is inline still necessary when using the Named Parameter Idiom?

The Named Parameter Idiom as described here mentions that there will be a performance impact when not using inline.

Since each member function in the chain returns a reference, there is no copying of objects and the chain is highly efficient. Furthermore, if the various member functions are inline, the generated object code will probably be on par with C-style code that sets various members of a struct. Of course if the member functions are not inline, there may be a slight increase in code size and a slight decrease in performance (but only if the construction occurs on the critical path of a CPU-bound program; this is a can of worms I’ll try to avoid opening), so it may, in this case, be a tradeoff for making the code more reliable.

Does this still hold true in spite of modern compilers and using -O2 when compiling? I was under the impression, that modern compilers will generally inline on their own (especially with -O2) when they see a possible benefit. In addition the inline keyword is little more than a hint to the compiler and by no means forces the inlining.

What do you call that in-line markdown on social media and collaboration sites?

What is the technical term for UI behavior where you can create tags or references using special characters (#, $ , @, &)

I want to find resources to learn how to develop and implement this concept, but not knowing what to look for makes it a bit harder.

Definitely appreciate any guidance!