Skip to content
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

Closed
jmmcduffie opened this issue Jul 16, 2014 · 13 comments
Closed

"Unsafe attempt to load URL from frame" #16

jmmcduffie opened this issue Jul 16, 2014 · 13 comments

Comments

@jmmcduffie
Copy link

@jmmcduffie 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 https://daveramsey-a.akamaihd.net/elp/ruby/dr-elp/assets/icons/icons-ab31b13cbcafb890891555dbf33843fe.svg from frame with URL https://www.daveramsey.com/elp/applicants/investing-prequalify. Domains, protocols and ports must match.

Firefox just fails silently.

@jonathantneal
Copy link
Owner

@jonathantneal 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.

@jmmcduffie
Copy link
Author

@jmmcduffie jmmcduffie commented Sep 24, 2014

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

@jalagrange
Copy link

@jalagrange 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?

@didoo
Copy link

@didoo 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).

@Rendez
Copy link

@Rendez 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.

@jonathantneal
Copy link
Owner

@jonathantneal 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.

@jmmcduffie
Copy link
Author

@jmmcduffie jmmcduffie commented Aug 4, 2015

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

@Rendez
Copy link

@Rendez Rendez commented Aug 8, 2015

For IE9 you can always use the XDomainRequest object.

@jpdevries
Copy link

@jpdevries 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.

@max
Copy link

@max max commented Dec 18, 2015

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

@DavidWells
Copy link

@DavidWells DavidWells commented Apr 8, 2016

I'm running into the same issue.

What anyone able to solve?

@tylertate
Copy link

@tylertate 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.

@macouella
Copy link

@macouella macouella commented May 23, 2018

For anyone who's wondering - https://css-tricks.com/ajaxing-svg-sprite/
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();
ajax.open("GET", "svg/sprite.svg", true);
ajax.send();
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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
10 participants