Getting error after adding nonce instead of unsafe-inline'

Question

I have below code in my xyz.js file.

init : function() {
   if (!this.iframe) {
       this.iframe = document.createElement("iframe");
       this.iframe.src = "javascript:false;";
       document.body.appendChild(this.iframe);

and I have update the code from unsafe-inline to nonce in above code i am calling document.body.appendChild(this.iframe);

and getting below error

1683098036010:402 Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present

I have tried to add nonce as below but it's not working

this.iframe.nonce = "EDNnf03nceIOfn39fn3e9h3sdfa";
this.iframe.script='nonce="EDNnf03nceIOfn39fn3e9h3sdfa"';
this.iframe.script.nonce="EDNnf03nceIOfn39fn3e9h3sdfa";
this.iframe.setAttribute('nonce', "EDNnf03nceIOfn39fn3e9h3sdfa");

As in code i have set this.iframe.src = "javascript:false;"; this should not throw that error.

can anyone please provide the update on this

Sakib Rahman · Answer 1 · 2023-05-08T10:59:42.683

0

For the nonce attribute you should set it on the script tag rather than the iframe. Then append the script tag to the body of the iframe's content document.

init: function() {
   if (!this.iframe) {
       this.iframe = document.createElement("iframe");
       this.iframe.src = "javascript:false;";
       document.addEventListener("DOMContentLoaded", function() {
           document.body.appendChild(this.iframe);
       }.bind(this));
   }

   // Set nonce attribute on the script tag
   var scriptTag = document.createElement("script");
   scriptTag.setAttribute("nonce", "EDNnf03nceIOfn39fn3e9h3sdfa");
   scriptTag.textContent = ''; // write your js code here

   // Append the script tag inside the iframe content
   this.iframe.contentDocument.body.appendChild(scriptTag);
}

edited May 08 '23 at 10:59

answered May 08 '23 at 05:51

Sakib Rahman

333
2
13

but my error is coming in document.body.appendChild(this.iframe); this line, it's not going down. – bateda May 08 '23 at 06:03
It's because the script is being executed before the document.body element is fully loaded. Edited the answer, have a try. – Sakib Rahman May 08 '23 at 06:10
getting below error. caught TypeError: Cannot read properties of null (reading 'body') at YAHOO.Adeptra.ProgressIndicator.init (adeptra.js?_=1683528863919:419:31) at adeptraInit (adeptra.js?_=1683528863919:1727:16) at n (utilities.js?_=1683528863919:13:7981) in this line this.iframe.contentDocument.body.appendChild(scriptTag); – bateda May 08 '23 at 06:56
@SakibRahman `this.iframe.contentDocument.body.appendChild(scriptTag);` is giving error as I see that `this.iframe` is null. I think `this.iframe.contentDocument.body.appendChild(scriptTag);` is getting executed before `this.iframe = document.createElement("iframe");` Hence `this.iframe` is null and when we do `this.iframe.something` it is giving Cannot read properties of null. How can we make this code as synchronizable so that code execution happens one line at a time? – Ravi May 08 '23 at 07:13

score 0 · Accepted Answer · edited May 11 '23 at 16:23

0

Issue is in this.iframe.src = "javascript:false;";. I have updated this line to this.iframe.src = "about:blank;";

For more please refer iframe without an src attribute

edited May 11 '23 at 16:23

Mohammad Aarif

1,619
13
19

answered May 11 '23 at 05:06

bateda

77
3

Getting error after adding nonce instead of unsafe-inline'

2 Answers2