Allow using <link> in customCSS

[Kreyren]

Issue

I have the CustomCSS on https://github.com/Kreyren/anilist_css which requires copy+pasting to automail extension each time there is an update

Proposal

Allow alternative method of parsing the context by using <link> so that it can be sourced from https://github.com/Kreyren/anilist_css/blob/master/core.css

[hohMiyazawa]

Will do some security research on that.

(be aware that your link is not a direct link to a stylesheet)

[Kreyren]

(be aware that your link is not a direct link to a stylesheet)

Elaborate?

[hohMiyazawa]

If you want to serve css from Github, you have to use

https://raw.githubusercontent.com/Kreyren/anilist_css/master/core.css

[hohMiyazawa]

Update: You can't even do that: https://github.blog/2013-04-24-heads-up-nosniff-header-support-coming-to-chrome-and-firefox/

[hohMiyazawa]

Current implementation (not live yet)

if(jsonData.customCSS.match(/^https.*\.css$/)){
    let styleRef = document.createElement("link");
    styleRef.id = "customExternalCSS";
    styleRef.rel = "stylesheet";
    styleRef.type = "text/css";
    styleRef.href = jsonData.customCSS;
    document.getElementsByTagName("head")[0].appendChild(styleRef)
}

(plus a destructor)

[Kreyren]

Update: You can't even do that: https://github.blog/2013-04-24-heads-up-nosniff-header-support-coming-to-chrome-and-firefox/

Correct me if i am wrong, but it seems that using raw in repository pins the master version and is updated on each commit? https://raw.githubusercontent.com/Kreyren/anilist_css/master/core.css

So i assume that mensioned concerns apply to gists only?

(i just woke up though so i am more likely to say something stupid)

[hohMiyazawa]

@Kreyren The issue is that it gets served as "text/plain" from Github, which means the browser will refuse to use it as a stylesheet:

https://i.stack.imgur.com/cZ6jw.png

[Kreyren]

I see, what do you propose as a solution?

kreyren wants to avoid making CD workflow

[Kreyren]

Aldo checking the file:

kreyren@leonid:~$ file /tmp/kaniliast.css 
/tmp/kaniliast.css: assembler source, ASCII text

I don't see anything that would cause this issue -> Maybe it's getting confused by me using @-moz-document or something?

[hohMiyazawa]

It's a header, it has nothing to do with the contents of your file.

You just need to serve it from somewhere that doesn't add the "X-Content-Type-Options: nosniff" header, because browsers respect that.

Browser: "Hey, github-san, can you send me core.css?" Github: "Sure, here it is, just a heads up, don't use it as a stylesheet" Browser: "Okay, got it, not using that one as a stylesheet"

[hohMiyazawa]

But anyway, the proposal is implemented. Closing this.

[Kreyren]

thanks for working on this ^-^

[aushamim]

Hey, although direct linking a CSS file from github as a link does not work I think a workaround can be implemented. I have tested this in a JS file and it seems to work. Don't know if it will work with automail. But please check if this can be implemented.

  const url = "https://raw.githubusercontent.com/some-user/some-repo/some-branch/some/path/file.css";
  const urlPattern = /^https:\/\/raw\.githubusercontent\.com\/.*\.css$/;

  if (urlPattern.test(url)) {
    fetch(url)
      .then((res) => res.text())
      .then((data) => {
        let styleRef = document.createElement("style");
        styleRef.id = "customExternalCSS";
        styleRef.innerHTML = data;
        document.getElementsByTagName("head")[0].appendChild(styleRef);
      });
  }

Here it checks if the link is from https://raw.githubusercontent.com/ and if the link ends with .css. Then using fetch function to load the data and rest is basically the same.

[hohMiyazawa]

@aushamim I'm rather hesitant to implement additional ways of loading external content, and at least I would have someone more knowledgeable than me look it over first.

But AFAIK, just hosting it somewhere that serves it with the correct headers should still work today.

[aushamim]

@hohMiyazawa Yes, hosting elsewhere works. But for me and other users who upload their CSS to GitHub, reducing another step to update to external hosting would be great.