HTML displayed using Data URI can't access relative paths
Question
I have an HTML string with me like this:
var str = "<html><head><link href='abc.css'/><script src='js/a.js'></script><title>hello</title></head><body><div><img src='images/abcd.png'></div></body></html>";
Now, I need to show this HTML in an iframe, so what I do is set the iframe src as follows:
document.getElementById('frameID').setAttribute('src', "data:text/html, " + str);
Now, the problem is that the html above requires some resources using relative paths, which is not possible to be accessed directly.
Though I do have all the resources required by the HTML string/file stored in Indexed DB as key value pairs, having key as the path and the value as the data of the file.
I tried doing this by setting an onload event on my iframe and then in the handler I try to access the contentWindow of the iframe but this has some security issues (since the origins are not the same). By getting the contentWindow I could have manipulated the img and the script tags.
Is there some way to be able to access these resources after setting the iframe src as I have shown above?
Please Help, I have been stuck for a long time.
2 answers
solution1
0 2022-11-15 14:46:31
What did you expect -- what [base URL(s)] are the [relative] URL(s) that are featured in the HTML document that you're loading with a data: URL, expected to be relative to ?
A resource loaded by the user agent using data: has no "base" for all intents and purposes, and a distinct authority (and origin , incidentally) that does not compare equal to any other.
It's an "ephemeral" document in some sense -- if the document uses URL(s) (an URL is not a [file] "path" although it may feature a pathname , strictly speaking) that do not feature an authority (ie they're so-called "relative" URL(s)), these cannot be used in practice because the user agent won't assume any authority (ie the domain part) or some pathname prefix. The analogy would be a street name and house number but without a city and country code to it.
The user agent does not use the origin or URL of the document that included the script that loaded the document using relative URL(s), as "base" URL for the document loaded with data: scheme. Instead, the origin and base URL for the latter, are assumed to be distinct from any other URL using the data: scheme, and that is by design -- two resources loaded each using data: do not share same origin and thus aren't considered to "belong to the same domain". This is motivated in no small part by security reasons -- any script (loaded from a random domain) can create a data: URL and load some document which doesn't mean two such documents have anything to do with each other or should belong to the same origin/domain.
There is a solution, although I'd say this is an XY problem -- use the base HTML element in the document being loaded with data: -- so that the user agent resolves relative URLs using the specified "base" URL.
solution2
-2 2022-11-15 14:32:34
I would like to comment on the same question, but I cannot comment. I can only tell even you add "./", "~/" or "../" to the paths, such as creating "~/js/a.js", it will not work for a data-uri, because it seems like it cannot reference the base html that you want it to go to.
Research continuing...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.