What is CSP and how to use it to protect WordPress

Lately you've probably heard and read about acronyms, CSP of Content Security Policy (content security policy), so let's explain what it means and how to apply it to WordPress.

What is CSP?

 attack-script-xss "width =" 440 "height =" 293 "srcset = "http://bootstrapx.com/wp-content/uploads/2018/06/ataque-script-xss.jpg 440w, https://ayudawp.com/wp-content/uploads/2016/10/ataque-script- xss-321x214.jpg 321w, https://ayudawp.com/wp-content/uploads/2016/10/ataque-script-xss-140x94.jpg 140w "sizes =" (max-width: 440px) 100vw, 440px " /> </p>
<p> The CSP is a series of specifications for <strong> protect websites against XSS attacks </strong> (<em> Cross Site Scripting </em>). </p>
<p> The idea is to add a series of <strong> HTTP headers that tell your visitor's browser what to run and what can block </strong>to avoid running unauthorized scripts or any other own or external resource. </p>
<p> The <a href= immense majority of current browsers recognize and use CSP headers.

 browsers-compatible-with-csp "width =" 838 "height =" 188 "srcset =" http://bootstrapx.com/wp-content/uploads/2018/06/navegadores-compatibles-con-csp-840x188.png 840w, https://ayudawp.com/wp-content/uploads/2016/10/navegadores-compatibles-con-csp-550x123.png 550w, https://ayudawp.com/wp-content/uploads/2016/10 /navegadores-compatibles-con-csp-768x172.png 768w, https://ayudawp.com/wp-content/uploads/2016/10/navegadores-compatibles-con-csp.png 1259w "sizes =" (max-width : 838px) 100vw, 838px "/> </p>
<p> It's important to add CSP to your website since <strong> will protect your visitors from running on their XSS, Spyware and Adware scripts </strong>that's nothing. [19659005] Basically, and to summarize, it indicates to the navigator from which they visit your what to upload and what not to upload, based on guidelines that you define, the headers CSP. </p>
<p> Some directives that you can include are these: </p>
<li><strong><code> base-uri </code></strong> restricts the URL that can appear in the element [19659014] of a page </li>
<li><strong><code> child-src </code></strong> lists the URLs of connectors and content embedders. For example: <code> child-src https://youtube.com </code> will allow you to insert YouTube videos but not from other sources. This is the directive that is currently used instead of the obsolete <strong><code> frame-src </code></strong>. </li>
<li><strong><code> connect-src </code></strong> limits the sources to which you can connect (via XHR, WebSockets and EventSource). </li>
<li><strong><code> font-src </code></strong> specifies the sources from which you can serve web fonts. For example, to activate Google web sources you would do it with <code> font-src https://themes.googleusercontent.com </code> </li>
<li><strong><code> form-action </code></strong> list valid endpoints for shipments from labels <code><br />
<form></code> </li>
<li><strong><code> frame-ancestors </code></strong> specifies the font that can embed the current page. This directive applies to labels <code><frame></code><code><iframe></code><code><embed> </code> and <code><applet></code>. This directive can be used in tags <code><meta></code> and applies only to resources other than HTML. </li>
<li><strong><code> img-src </code></strong> defines the sources from which images can be loaded. </li>
<li><strong><code> media-src </code></strong> restricts the sources that can serve video and audio. </li>
<li><strong><code> object-src </code></strong> allows to control Flash and other connectors. </li>
<li><strong><code> plugin-types </code></strong> limits the type of connectors that a page can invoke. </li>
<li><strong><code> report- uri </code></strong> specifies the URL to which the browser will send reports when a content security policy is violated. This directive can be used in labels <code><meta></code>. </li>
<li><strong><code> style-src </code></strong> is the counterpart of <code> script-src </code> for style sheets. </li>
<li><strong><code> upgrade-insecure-requests </code></strong> ] Instructs user agents to rewrite URL schemes, switching from HTTP to HTTPS. This directive is for websites with many old URLs that have to be redirected. </li>
<p> And then we have the elements to include in the directives, for example: </p>
<li><strong><code> 'none' </code></strong>as its name suggests, it does not match anything </li>
<li><strong><code> 'self' </code></strong> that matches the current source, usually your web, but not its subdomains. </li>
<li><strong><code> 'unsafe-inline' </code></strong> allows JavaScript and CSS embedded from external sources. </li>
<li><strong><code> 'unsafe-eval' </code></strong> allows text-to-JavaScript mechanisms like <code> eval </code>. </li>
<p> These directives are just some, and CSP is incorporating new ones, as well as modifications, in each new version, so I recommend you check the latest specifications <a href= on the W3C specific web on CSP .

How do I add CSP to my website?

 as-works-csp-wordpress "width =" 838 "height = "593" srcset = "http://bootstrapx.com/wp-content/uploads/2018/06/como-funciona-csp-wordpress-840x594.png 840w, https: //ayudawp.com/wp-content/uploads/2016/10/como-funciona-csp-wordpress-550x389.png 550w, https://ayudawp.com/wp-content/uploads/2016/10/como-funciona -csp-wordpress-768x543.png 768w, https://ayudawp.com/wp-content/uploads/2016/10/como-funciona-csp-wordpress.png 1500w "sizes =" (max-width: 838px) 100vw , 838px "/> </a> </p>
<p> You can add the rules to the file <code> .htaccess </code>for which your server must have the header module active. This would be an example: </p>
<div id=

<] mod_headers . c >

Header set Content Security Policy "default-src 'self'; img-src 'self' http: https: * .gravatar.com;"

< / IfModule >

As you can see in the code above, in this case the CSP, through the application of some of the directives that we have listed before, allows the loading of everything that is loaded directly from the same web ( default-src 'self' ), the images of your web ( img-src 'self' ) as well as from gravatar.com, either in http or in https . Easy, huh?

The problem is that there are no fixed rules for all sites but it will depend on each website the rules that you must add. In the previous example, if for example external sources loads or scripts from Google Analytics would not be executed. The same could happen with plugins that use remote loading scripts.

It is for this reason that you must customize the CSP headers to the needs of your web . An interesting way to test what would happen is to create this function to show your site if you activate certain CSP directives:

With this method you tell the browser not to execute the blocking directives but to inform you of what would happen if you applied them.

 notices-violations-csp-in-browser-console "width =" 838 "height =" 670 "srcset =" https://ayudawp.com/wp-content/uploads/2016/10/avisos-violaciones-csp -in-browser-console-840x672.png 840w, https://ayudawp.com/wp-content/uploads/2016/10/avisos-violaciones-csp-en-consola-de-navegador-550x440.png 550w , https://ayudawp.com/wp-content/uploads/2016/10/avisos-violaciones-csp-en-consola-de-navegador-768x614.png 768w, https://ayudawp.com/wp-content/ uploads / 2016/10 / warnings-violations-csp-in-browser-console.png 1280w "sizes =" (max-width: 838px) 100vw, 838px "/> </a></p>
<h2><span id= How do I add CSP headers in WordPress?

 log o-csp

In fact it is your thing to do it as we have seen before, adding your rules to the file .htaccess but you can "help" from a plugin, for example: [19659097] Headit

This plugin offers you an interface inside the desktop in which to add the HTTP header rules you want, not just CSP. Of course, it does not do anything for you, you have to add them yourself and you should know what you're doing, just like if you did it directly in your .htaccess file.

 headit-csp-plugin " width = "150" height = "150" srcset = "http://bootstrapx.com/wp-content/uploads/2018/06/headit-csp-plugin-150x150.png 150w, https://ayudawp.com/ wp-content / uploads / 2016/10 / headit-csp-plugin-160x160.png 160w, https://ayudawp.com/wp-content/uploads/2016/10/headit-csp-plugin-240x240.png 240w, https://ayudawp.com/wp-content/uploads/2016/10/headit-csp-plugin-60x60.png 60w, https://ayudawp.com/wp-content/uploads/2016/10/headit-csp -plugin-184x184.png 184w "sizes =" (max-width: 150px) 100vw, 150px "/> </a></p>
<h3><span id= WP Content Security Policy

In this case it is somewhat more explicit, but again you must manually add the headers At least it offers text entry boxes for content types for you to enter your directives, as well as selectors from which to specify if You can activate CSPs in test mode and even a page with the message log.

In the end, clearly, you must learn to manually add the CSP headers, no plugin will do it for you, that is clear to you.

Is it worth adding the CSP headers?

 csp-validator "width =" 838 "height =" 469 "srcset =" https://ayudawp.com/wp-content/uploads/2016/10/csp-validator- 840x470.png 840w, https://ayudawp.com/wp-content/uploads/2016/10/csp-validator-550x308.png 550w, https://ayudawp.com/wp-content/uploads/2016/10/ csp-validator-768x430.png 768w, https://ayudawp.com/wp-content/uploads/2016/10/csp-validator.png 850w "sizes =" (max-width: 838px) 100vw, 838px "/> </p>
<p> Actually yes, <strong> CSP is really important for your visitors </strong>as they will not have to suffer unsolicited scripts or content or XSS vulnerabilities from your website. In short, that you are protecting them. </p>
<p> Regarding <strong> the most important advance of CSP for web administrators is awareness and responsibility </strong>because it claims that <strong> controls and know what your website will do with the resources that it serves and executes </strong>. </p>
<p> In this way, if you establish strict rules for, for example, the sources of the images, and a script tries to insert an image in your web from an unauthorized source , that image will be blocked, and you will find out instantly. </p>
<p> Regarding <strong> the developers, for their part, need to know exactly what their code does on the websites, and CSP will help them control it </strong> ] The developer will see the parts of their code that require external resources and those that do not, which may encourage them to avoid embedded functions and styles from external sources, for example, helping them to be more strict and careful. </p>
<p> For developers there is a very interesting Sublime Text 2 plugin, <a href= CSP Validator which checks if your JavaScript, HTML and CSS have potential CSP problems.

More information about CSP

Loading …

You can that also helps you: