I investigated CSP (Content Security Policy)

Today at work, I came across the following error message, so I will write about what I researched about CSP (Content Security Policy).

Refused to execute inline script because it violates the following Content Security Policy directive

what are you going to do

It prohibits the execution of inline scripts (such as scripts with JS added later in GTM, etc.) and the eval method, and limits the sources that can be read.

script-src If it says 'https://yahoo.co.jp', you can use the script from the Yahoo domain. (Others will be restricted)about it.

Regarding the above "script-src" part, there are various directives available, so script-src is a directive related to script (js) execution.

In addition, it seems that you can do various things such as css and image settings such as style-src and img-src.

What purpose was it made for?

This feature was created to prevent attacks that exploit security vulnerabilities such as cross-site scripting and data injection attacks.

where is it set?

when accessing a web serviceHTTP response header or html meta tagIncluded in

When setting it with Apache, it seems to be set in httpd.conf and .htaccess.(Requires mod_headers module.)

Let's take a look at the HTTP response headers.

This is the response header when sending an HTTP request that returns something like this. (As it is...)

200 OK Access-Control-Allow-Origin: * Connection: Keep-Alive Content-Encoding: gzip Content-Type: text/html; charset=utf-8 Date: Mon, 18 Jul 2016 16:06:00 GMT Etag: " c561c68d0ba92bbeb8b0f612a9199f722e3a621a" Keep-Alive: timeout=5, max=997 Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT Server: Apache Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16: 06:00 GMT; Max-Age=31449600; Path=/; secure Transfer-Encoding: chunked Vary: Cookie, Accept-Encoding X-Backend-Server: developer2.webapp.scl3.mozilla.com X-Cache-Info: not cacheable; meta data too large X-kuma-revision: 1085259 x-frame-options: DENY

The I option of the curl command outputs only the headers, so let's take a look at the twitter response headers.

curl -I https://twitter.com

Like this, various domains are set up. (There were a lot of them, so I've omitted them.)

content-security-policy: connect-src 'self' blob: https://*.giphy.com https://*.pscp.tv https://*.video.pscp.tv https://*.twimg .com https://api.twitter.com https://api-stream.twitter.com https://ads-api.twitter.com https://aa.twitter.com https://caps.twitter. com https://media.riffsy.com https://pay.twitter.com

CSP Evaluator

This site seems to parse the content-security-policy from the response header when you enter the domain.

CSP Evaluator

CSP Evaluator

csp-evaluator.withgoogle.com

remarks

Looking at the site below, it seems that it is not used much.

Alexa Top Only used by 4-6% of 1 million sites

Furthermore, on sites using this CSP, if the settings are not set properly, the JS that is executed will be prohibited, causing the console screen to turn bright red. . .

Points that caught my attention

Inline scripts using custom HTML tags in GTM were rejected.

However, it seems that events can be sent using GTM (using GA tags).

I thought that js using GA objects was also used to send GA events, but I would like to investigate this a little more.

reference

Content Security Policy (CSP) - HTTP | MDN

Content Security Policy (CSP) is a feature that helps prevent or minimize the risk of certain types of security threats. It consists of a set of instructions from a website to the browser, restricting what the code that makes up the site can execute...

developer.mozilla.org