jquery - how to prevent "operation is insecure" warning when dynamically inserting javascript into a page? - S

admin管理员组

文章数量:1331598

I'm trying to add a block of meta, link and scripts to a jQuery Mobile page dynamically.

The script includes a rule, I'm adding to a CSS style sheet via javascript (must be like this unfortunately).

Looks like this:

<script type="text/javascript"
if ('addRule' in sheet) {
sheet.addRule(".splash:before",
  "background: url("' + x + '") no-repeat center center fixed; " +
  "-webkit-background-size: 100%; -moz-background-size: 100%; " +
  "-o-background-size: 100%; background-size: 100%; " +
  "-webkit-background-size: cover; -moz-background-size: cover;" +
  "-o-background-size: cover; background-size: cover;", 0);
} else if ('insertRule' in sheet) {
sheet.insertRule(".splash:before { " +
  "background: url("' + x + '") no-repeat center center fixed; " +
  "-webkit-background-size: 100%; -moz-background-size: 100%; " +
  "-o-background-size: 100%; background-size: 100%; " +
  "-webkit-background-size: cover; -moz-background-size: cover; "+
  "-o-background-size: cover; background-size: cover;" + " }", 0); 
}
</script>

with x being the background image url, which can be set dynamically when the code block is appended to the page head.

Problem is:
I'm getting this:

SecurityError: The operation is insecure. [Break On This Error]     
slice.call( docElem.childNodes, 0 )[0].nodeType;

reported in Firebug.

If I hardcode a URL for x it works fine, so I assume the browser plains about URL variables being used.

Question:
Any idea how to circumvent this? I will need to pass in the URL dynamically.

I'm trying to add a block of meta, link and scripts to a jQuery Mobile page dynamically.

The script includes a rule, I'm adding to a CSS style sheet via javascript (must be like this unfortunately).

Looks like this:

<script type="text/javascript"
if ('addRule' in sheet) {
sheet.addRule(".splash:before",
  "background: url("' + x + '") no-repeat center center fixed; " +
  "-webkit-background-size: 100%; -moz-background-size: 100%; " +
  "-o-background-size: 100%; background-size: 100%; " +
  "-webkit-background-size: cover; -moz-background-size: cover;" +
  "-o-background-size: cover; background-size: cover;", 0);
} else if ('insertRule' in sheet) {
sheet.insertRule(".splash:before { " +
  "background: url("' + x + '") no-repeat center center fixed; " +
  "-webkit-background-size: 100%; -moz-background-size: 100%; " +
  "-o-background-size: 100%; background-size: 100%; " +
  "-webkit-background-size: cover; -moz-background-size: cover; "+
  "-o-background-size: cover; background-size: cover;" + " }", 0); 
}
</script>

with x being the background image url, which can be set dynamically when the code block is appended to the page head.

Problem is:
I'm getting this:

SecurityError: The operation is insecure. [Break On This Error]     
slice.call( docElem.childNodes, 0 )[0].nodeType;

reported in Firebug.

If I hardcode a URL for x it works fine, so I assume the browser plains about URL variables being used.

Question:
Any idea how to circumvent this? I will need to pass in the URL dynamically.

• javascript
• jquery
• security
• dynamic

Share Improve this question Follow edited Nov 28, 2014 at 8:31 Adam Jensen 54111 gold badge1010 silver badges2525 bronze badges asked Feb 14, 2013 at 15:35 frequentfrequent 28.5k6161 gold badges187187 silver badges336336 bronze badges 4

• You aren't including http in https are you? – Kevin B Commented Feb 14, 2013 at 15:37
• If the security check could be circumvented it wouldn't be very secure would it? That said it's strange the code would behave differently when hardcoding the URL versus building the string dynamically. Have you doublechecked that the resulting string being added as a rule is the same in both cases? – millimoose Commented Feb 14, 2013 at 15:38
• @KevinB: no, only on localhost at the moment – frequent Commented Feb 14, 2013 at 15:39
• @millimoose: I don't want to circumvent, so question would be is there a better way to do this than this? Maybe I should just build the whole url() string and add it vs only inserting the path – frequent Commented Feb 14, 2013 at 15:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is almost always an issue relating to the Same Origin Policy. This means that the files you're loading (background images, javascript files, css files, etc) must be the same domain, same subdomain, same protocol (http vs https) and same port.

Additionally, are you running this locally or on the server? You will get these issues when running locally because the origin is technically "file:///", so if you're providing links to files that ARE hosted on a server, you may get these errors.

I had same problem, Its happening only when you opening files in locally with sessionStorage method, so run it in a web server like wamp etc.

本文标签：