giuem/hexo-filter-crossorigin

Append crossorigin attribute to HTML elements

hexo-filter-crossorigin

Append crossorigin attribute to HTML elements (<img>, <video>, etc).

Why

See https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests#remember_to_opt-in_to_cors_mod.

UPDATE (2019-11): To cache thrid part resouces which have CORS configured correctly, you can also write your service workers script like this (notice fetchOptions field):

workbox.routing.registerRoute(
  new RegExp("https?://cdn.jsdelivr.net/"),
  new workbox.strategies.CacheFirst({
    cacheName: "static-resources",
    fetchOptions: {
      mode: "cors",
      credentials: "omit"
    },
    plugins: [
      new workbox.expiration.Plugin({
        maxAgeSeconds: oneYear
      })
    ]
  })
);

Config

# _config.yml

filter_crossorigin:
  - name: img
    crossorigin: true
    domains:
      - unpkg.com
    attrs:
      - src

• name: selectors (such as img.lazyload or link[rel="stylesheet"]).
• crossorigin: true (alias of anonymous) | false | anonymous | use-credentials.
• domains: optional. If not provided, all elements that match tag name will be affected.
• attrs: optional. Tag attributes to match domains. Default to src, data-src, href.

hexo-filter-crossorigin's Issues

Shouldn't use 'crossorigin="false"'

According to MDN:

An invalid keyword and an empty string will be handled as the anonymous keyword.

Shouldn't process all <link> elements

https://runkit.com/sukkaw/5dd424854e2cde0013e84050

const appendAttr = require('hexo-filter-crossorigin/lib/appendAttr.js');
require('chai').should();

const tags = [
    { "name": "link", "crossorigin": true }
];

const html_1 = '<link rel="preconnect" href="//cdn.jsdelivr.net">';
const html_2 = '<link href="https://blog.skk.moe/" rel="canonical">';

const expected_1 = '<link rel="preconnect" href="//cdn.jsdelivr.net" crossorigin="anonymous">';
const expected_2 = html_2;

appendAttr.default(html_1, tags).should.eql(expected_1);
appendAttr.default(html_2, tags).should.eql(expected_2);

AssertionError: expected '<link href="https://blog.skk.moe/" rel="canonical" crossorigin="anonymous">' to deeply equal '<link href="https://blog.skk.moe/" rel="canonical">'