New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Unsafe attempt to load URL from frame" #16

jmmcduffie opened this Issue Jul 16, 2014 · 13 comments


None yet
10 participants

jmmcduffie commented Jul 16, 2014

I am having trouble referencing an external SVG hosted by a CDN. It looks like some kind of CORS issue. Here's the error that Chrome and Safari throw:

Unsafe attempt to load URL from frame with URL Domains, protocols and ports must match.

Firefox just fails silently.


This comment has been minimized.


jonathantneal commented Aug 15, 2014

Yes, it’s because <use> is asking for the resource as a kind of document, which is a no-no. One way to work around this is trigger the polyfill in every browser and setup your CDN to allow XMLHttpRequests.


This comment has been minimized.

jmmcduffie commented Sep 24, 2014

So, if I'm reading that correctly, this is a limitation of SVG and not of your library. Right?


This comment has been minimized.

jalagrange commented Apr 24, 2015

Hello, I'm currently using AWS cloudfront and came up with this same issue. How exactly did you solve this?


This comment has been minimized.

didoo commented Apr 25, 2015

Currently there is no workaround (if you want to use ). The only way to load an external SVG from a CDN is via an Ajax call (see how svg4everybody does, in its code).


This comment has been minimized.

Rendez commented Aug 2, 2015

A solution might be to proxy-pass your image file using for example nginx, so that your file can be requested at your main domain.


This comment has been minimized.


jonathantneal commented Aug 4, 2015

Without setting up your CDN to allow requests, this is a security feature (and in your case limitation) of cross domain requests, and not of SVGs or this library per say.


This comment has been minimized.

jmmcduffie commented Aug 4, 2015

Thanks, @jonathantneal. We're going to try moving our assets to a subdomain to overcome this.


This comment has been minimized.

Rendez commented Aug 8, 2015

For IE9 you can always use the XDomainRequest object.


This comment has been minimized.

jpdevries commented Nov 12, 2015

I'm loving using <use> within <svg> to use svg icon sprites rather than icon fonts. I understand that there is currently no way to load them from a CDN even with CORS configured but what I am wondering is if there is a way to make use of some sort of onerror handler so that today we can attempt to load from a CDN, detect if it didn't work, and then load locally as a fallback.


This comment has been minimized.

max commented Dec 18, 2015

@jmmcduffie I just tried moving the assets to a subdomain but still no luck. Did it work for you?


This comment has been minimized.

DavidWells commented Apr 8, 2016

I'm running into the same issue.

What anyone able to solve?


This comment has been minimized.

tylertate commented Jun 10, 2016

I hit this problem as well when trying to serve an SVG sprite from a CDN. First, there is a fundamental problem: The use tag's xlink:href will NEVER load content from a remote server, even with CORS turned on. See the comments on this post.

There is a PARTIAL workaround: configure the CDN to handle CORS (CloudFront instructions, Heroku/Rails instructions) and then instruct svg4everybody to use AJAX to load the remote svg asset by setting polyfill to true: svg4everybody({ polyfill: true; });

While that will successfully load the remote resource, it won't stop the browser from throwing an error about "Unsafe attempt to load URL" for every instance of <use> on the page, which is ugly.

After going through all those steps I ended up just serving my SVG sprite directly from the server rather than from the CDN. Sometimes the simplest solution is the best.


This comment has been minimized.

igimanaloto commented May 23, 2018

For anyone who's wondering -
The process described is:
a) Requesting the svg resource via XMLHTTPRequest
b) Appending the result to the body of the html page.

From the article:

var ajax = new XMLHttpRequest();"GET", "svg/sprite.svg", true);
ajax.onload = function(e) {
  var div = document.createElement("div");
  div.innerHTML = ajax.responseText;
  document.body.insertBefore(div, document.body.childNodes[0]);

Just pasting it just in case anyone encounters the same issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment