1

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 complains about URL variables being used.

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

Adam Jensen
  • 541
  • 1
  • 10
  • 25
frequent
  • 27,643
  • 59
  • 181
  • 333
  • You aren't including http in https are you? – Kevin B Feb 14 '13 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 Feb 14 '13 at 15:38
  • @KevinB: no, only on localhost at the moment – frequent Feb 14 '13 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 Feb 14 '13 at 15:40

2 Answers2

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.

Sites Done Right
  • 642
  • 4
  • 11
  • Good catch, even if it's a hypothesis so far. – millimoose Feb 14 '13 at 15:41
  • ok, probably the problem of pulling files from CDN on localhost. Checking – frequent Feb 14 '13 at 15:43
  • ok, I get the same error, if I try to pull the file from the filesystem locally. – frequent Feb 14 '13 at 15:46
  • Upload the html file with the Javascript in it to the CDN where the files are being loaded from and load the HTML from that location. That should fix it. Additionally, if using https, ensure that every file you're pulling has https protocol set as that will cause the problem every time. Firefox can sometimes be lenient on that, but Chrome is very very strict about Same Origin Policy when you're running in https. – Sites Done Right Feb 14 '13 at 15:46
0

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.

Jaison James
  • 4,414
  • 4
  • 42
  • 54