[webkit-dev] CSS and CORS

[Dirk Schulze]

Hi WebKit folks,

I have a question to origin restriction and CSS. First the context:

CSS Masking[1] aims to combine the two different 'mask' property implementations from WebKit and Firefox. To make it short, 'mask' takes an URL and this can either be a reference to an image, or to an <mask> element:

<svg>
	<mask id="mask">
		…
	</mask>
</svg>
<style>
img {
	mask: url(#mask); /* references an SVG Mask element for masking operation (Firefox), OR */
	-webkit-mask: url(test.png); /" takes a reference to an image and operates the masking with the image (WebKit) */
</style>
<img … />

CSS Masking tries to make both possible in the future.

The problem is, that a <mask> can be in an external SVG file and be referenced by SVG fragments: url(http://external.com/mask.svg#mask). It would still not be sure it the fragment points to a graphical element like a <path> (then the SVG file would be interpreted as image) or if it references a <mask> element, in which case it will be an external resource. You need to download the file and parse it to know that.

Does it matter to know if it is an external resource or image before downloading?

A <mask> element can have events, which run JavaScript: <mask onload="console.log('CORS? Of course!')">. Running the <mask> element will fire the event, which is maybe a violation against CORS, since the SVG file can come from a different origin.

For images, we don't care about the origin, don't run scripts and don't fire events.

My question is if we have already an CSS property, widely implemented in WebKit, where CORS matters? When do we decide not to go on with the interpretation of a resource because of violation of CORS? Before we even download the resource? After we may already parsed it?

Firefox does care about that before parsing and does not load the entire SVG file if it is from a different origin. Since Firefox does not support image references for 'mask', they always assume that the reference is an external reference and not an image.

Opera does not care about the origin, but scripts are not executed and events don't fire.

Greetings,
Dirk

[1] http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#mask-property

PS: WebKit has support for 'mask' property with referencing of <mask> elements. Currently, external files are not supported. The mask element must be in the same document.