Embed cross-domain SVG content documents using the object tag

Question

Is it "legal" to have an SVG that contains data from an external domain, i.e. (data="//da86ge957603k.cloudfront.net/rails/grafitti_logo-f4e8238a87c979c0cf5b41481c982b71.svg") and then bind the load event to the object and then pass contentdocument property access the SVG DOM of this object? I can do this when the SVG is on the local domain, but whenever I try to host the SVG elsewhere I get a "this.contentDocument is empty" error. I've also tried getSVGDocument() . I can't find anywhere that says this is a cross-origin security issue, and as far as I know this should be allowed for object tags used in SVG (I'm not using iFrame). I appreciate you taking the time to help me. Below is the code I use to embed the object and binding and try to access the DOM (as I said, this works when the SVG is in the local domain).

<object id="gangstergraffiti" type="image/svg+xml" data="<%= image_url("grafitti_logo.svg") %>">Gangster</object>

$("#gangstergraffiti").each(function() {
  this.addEventLi stener('load', svgGangsterGraffitiReady, false);
});

function svgGangsterGraffitiReady(){
  var graffitistrokes = this.contentDocument.getElementsByClassName('graffiti');
  for (var i = 0; i < graffitistrokes.length; i++) {
    graffitistrokes[i].setAttribute("stroke", "white");
    graffitistrokes[i].setAttribute("fill", "white");
  }
}

Answer 1

w3c documented this. Learn more about object tags here You cannot access tagged data across domains except through CORS.

There is a more readable refinement on MDN To resolve this issue, you will need to enable CORS

on the remote site (if you can). ###