I am trying to simply display a TikTok video on a page inside a Chrome extension.
Random example of the code I included in my HTML file:
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/#sabri.62drsm/video/7192368102720539909" data-video-id="7192368102720539909" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="#sabri.62drsm" href="https://www.tiktok.com/#sabri.62drsm?refer=embed">#sabri.62drsm</a> <p></p> <a target="_blank" title="♬ Originalton - Sabri ރ" href="https://www.tiktok.com/music/Originalton-7192368158199466757?refer=embed">♬ Originalton - Sabri ރ</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
The following errors show up in the console:
"Refused to load the script 'https://www.tiktok.com/embed.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback."
And
"Refused to load the script 'https://www.tiktok.com/embed.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback."
Some text and a link to the user's account are indeed being fetched from the source, although nothing more.
ChatGPT instructed me to add the follow snippet to my manifest:
"content_security_policy": "script-src 'self' https://www.tiktok.com; object-src 'self'"
Didn't work.
Related
Had to set Content-Security-Policy header to...
default-src https: 'unsafe-inline';
object-src 'none'
... for a single html page with no dependencies (with inline scripts) to run the <script> tag.
Why is inline considered unsafe?
MDN says inline are excluded but it doesn't say why, same in reference.
CSP protects against XSS injections.
If a user is able to inject a <script> tag or onclick, because you forgot to escape user-input CSP will prevent that Javascript from running.
So for security purposes it can be good to just avoid any inline scripts altogether, so you can say: "Anything appearing in my HTML body is unintentional and should be blocked", and this is definitely a recommended practice.
I'm implementing CSP on an existing website and have been following along with this article on passing a CSP nonce to GTM and using it as a Custom Variable in GTM.
<script nonce="9CZ9vGge7C9At2iwrPtSNG7Ev10=" id="gtmScript">
<!-- Google Tag Manager -->
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MYID');
<!-- End Google Tag Manager -->
</script>
Variable gets added as a DOM Element Variable. Then I add the variable value to my custom script. Here is a demo script. It is the entirety of a Custom HTML tag in GTM.
<script nonce="{{nonce}}">
console.log("CSP-allowed script with nonce:", "{{nonce}}");
</script>
The issue is, CSP still blocks this. And it has nothing to do with the {{nonce}} variable - proven by changing CSP to 'unsafe-inline' and seeing the correct value output in console.
I have since been reading that GTM strips attributes out of the tags it injects inline. Which would be odd, as it would mean the linked article above actually never would have worked (it's only a 3 month old article). But does this mean that it's physically impossible to get scripts in Custom HTML GTM tags to function with CSP? The solution in the above link is impossible because the script will always be blocked by CSP.
UPDATE: Here is my CSP
<meta http-equiv="Content-Security-Policy" content="
default-src 'none' ;frame-src 'self';
script-src 'self' 'nonce-$CSPNonce' *.googletagmanager.com;
style-src 'self' 'nonce-$CSPNonce';
font-src 'self';
img-src 'self' 'nonce-$CSPNonce' data:;
connect-src 'self'">
And the console error
gtm.js?id=GTM-MYID:782 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-mQoPSCSszFQ8loJF5jii6quCHeY=' *.googletagmanager.com". Either the 'unsafe-inline' keyword, a hash ('sha256-3kt898DvY8z+SqQyfz8g06pUzzBokMjvzcQ5uN50wTs='), or a nonce ('nonce-...') is required to enable inline execution.
OK I found the cause here. I'm leaving the question up in case someone stumbles across this in future.
When you create a Custom HTML tag in GTM, under the code window is a tickbox called "Support document.write". The tooltip beside it doesn't mention much other than allowing you to use document.write() in your scripts via a "new rendering engine".
For whatever reason, if this is not ticked, the nonce attribute is stripped. With it ticked (using the new rendering method I guess), it is not stripped.
You must both turn on support for document.write AND use an additional alternate name for your nonce attribute. Between GTA and chrome your nonce value will be eaten for security reasons.
<script nonce="NONCEHERE" data-dsn="NONCEHERE" id="gtmScript">
<!-- Google Tag Manager -->
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var
n=d.querySelector('[nonce]');n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MYID');
<!-- End Google Tag Manager -->
</script>
Then use the data-dsn attribute to pull it into GTM.
Not able to apply css to the asp.net mvc login page. chrome browser says
'Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-PyLHmjCk4/4GwQUxB5Nv2ZOIHPu1XXusXCu09QBy+nc='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
enter image description here
Thanks in Advance.
It looks from the error message that you have an inline style, which CSP blocks. You can put that style in your CSS file instead.
You can also use style-src 'self' 'unsafe-inline'; in your content-security-policy declaration, but this is not recommended for security concern.
Check this OWASP explanation for more details.
Currently, my CSP config in Apache looks like that:
Header set Content-Security-Policy "default-src 'self' 'unsafe-inline' https:"
I'd like to remove the unsafe-inline directive to improve my site's security, see Mozilla's Observatory.
Nevertheless, whenever I remove it, my browser's console shows an error indicating that the inline GA couldn't load…
Is there a workaround?
Sorry to Edit again. The proposed solution in
New Google Analytics code into external file
did not work for me. instead i got it to work like this:
i add a script tag to my page to load the analytics.js:
<script src="https://ssl.google-analytics.com/analytics.js" async id="ga"></script>
<script src="my_other.js" async></script>
and then in my_other.js file i do this:
window.addEventListener("load", function(){
ga('create', 'UA-********-1', 'auto');
ga('send', 'pageview');
})
then in your csp header you have to set some exeption to script-src and image-src. somthing along these lines:
img-src data: 'self' *.google-analytics.com *.g.doubleclick.net;
script-src 'self' *.google-analytics.com
As an alternative work-around, you can allow specific, static scripts by adding the script's hash to your content security policy. (A nonce works for dynamic scripts):
Hash your script (e.g., using sha256). Do include white space/capitalization. Don't include the script tags.
Add script-src 'sha256-[MYHASH]' to your content security policy.
See MDN for details. Not supported on IE11 .
I am using Google maps in my angular2/Ionic2 app and I get the following error:
js?libraries=geometry,drawing,places:79 Refused to load the font
'https://fonts.gstatic.com/s/roboto/v15/isZ-wbCXNKAbnjo6_TwHThJtnKITppOI_IvcXXDNrsc.woff2'
because it violates the following Content Security Policy directive:
"font-src 'self' data:".
What is this error, and how can I fix it?
My index.html has:
<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src * data:; default-src * 'unsafe-eval' 'unsafe-inline'">
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places"></script>
Removing the meta tag solves the problem, but I am not sure what it does and whether I should remove it.
This is not about inline javascript, but inline style tags. Either you have them (probably not), or you are using something (possibly a jquery plugin) that is adding them. Based from this blog, you ned to enable it by adding the configuration from https://github.com/rwjblue/ember-cli-content-security-policy#options into your config/environment.js.
The default contentSecurityPolicy value is:
contentSecurityPolicy: {
'default-src': ["'none'"],
'script-src': ["'self'"],
'font-src': ["'self'"],
'connect-src': ["'self'"],
'img-src': ["'self'"],
'style-src': ["'self'"],
'media-src': ["'self'"]
}
Check these related links: Violating Content Security Policy directive after ember-cli 0.0.47 upgrade and "[Report Only] Refused to load the font..." error message on console