fix: inline escaped SVG data-uri make canvas tainted in Safari between iOS 10-11.2

[emon100]

Summary

This PR fixes/implements the following bugs/features

• Inline escaped SVG data-uri make canvas tainted in Safari between iOS 10.3 - 11.2

What is escaped SVG data-uri?

Before, developers can put inline SVG data-uri into CSS like this.

.icon-arrow-down {
    width: 20px; height: 20px;
    background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#00A5E0" d="M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z"/></svg>') no-repeat center;
    background-size: 100%;
}

However, modern browsers do not support some characters like "，%，#，{，}，<，> in the data-uri anymore. Using base64 encoded SVG data-uri can bypass this problem, but it is not a good practice since the length will increase by 1/3.

The best practice (also with best compatibility) is to 'encodeURIComponent' the SVG data-uri. After that, the code like this:

.icon-arrow-down {
    width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='%2300A5E0' d='M145.659,68.949c-5.101-5.208-13.372-5.208-18.473,0L99.479,97.233 L71.772,68.949c-5.1-5.208-13.371-5.208-18.473,0c-5.099,5.208-5.099,13.648,0,18.857l46.18,47.14l46.181-47.14 C150.759,82.598,150.759,74.157,145.659,68.949z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100%;
}

demo

What is the problem with Safari?

Safari between iOS 10.3-11.2 will need the 'crossorigin' attribute on the img tag to load not only base64 encoded data-uri but all kinds of data-uri.
#1797 tried to fix this problem, but I found when the data-uri isn't base 64 the problem still exists.

In my humble opinion, I suggest load every data-uri with the 'crossorigin' attribute.

Test plan (required)

Test case was added in the tests/reftests/background/svg.html.

Closing issues

Fixes this comment: #1575 (comment)

[ferry77]

On safari Version 14.1.2 (16611.3.10.1.6)
I got similar issue (SecurityError: The operation is insecure.) on pseudo CSS on eg.
label::before { background: url("data:image/svg+xml ..... /svg%3E") }

Since my case is not an IMG element, would the solution above also fix this?

Thanks in advance

[emon100]

On safari Version 14.1.2 (16611.3.10.1.6)
I got similar issue (SecurityError: The operation is insecure.) on pseudo CSS on eg.
label::before { background: url("data:image/svg+xml ..... /svg%3E") }

Since my case is not an IMG element, would the solution above also fix this?

Thanks in advance

@ferry77
I believe my PR can fix your problem.

You can try to use non-minified script and replace if (isInlineBase64Image(src) || useCORS) with if (isInlineImage(src) || useCORS). Please tell us whether it will fix your problem.