IMfO.ru

All God’s chillun got shoes

Embeded SVG, base64, security in Firefox

Любопытство по поводу доступа к chrome://../svg.svg было отнюдь не праздным: стояла задача добавления определённой SVG-графики в код страницы. Здесь можно провести некие параллели с расширением FlashBlock, где взамен блокируемых flash-объектов создаются элементы с фоновым изображением, источником которого служит файл из каталога расширения (authorware.png, director.png или flash.png). Доступ к таким файлам из контекста страницы разрешён, а вот если создать какой-то объект и указать источником svg-файл, расположенный в каталоге расширения, то ничего путного из этого не выйдет, т.к. доступ к этому файлу будет заблокирован по соображениям безопасности.

Начал смотреть в сторону <canvas>, но для моей задачи получалось слишком тормозное решение, да и с масштабированием там возникли определённые сложности. И тут я вспомнил про base64…

Создаём шаблон

PHP
<?php
$svg = '<?xml version="1.0" standalone="no"?>'.
       '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" '.
       '"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">'.
       '<svg xmlns="http://www.w3.org/2000/svg"/>';
echo base64_encode($svg);
?>

HTML
<embed id="svg64" type="image/svg+xml" width="100" height="100"
    src="data:image/svg+xml;base64,{то, что получили в $svg}"/>"

и дальше этим хозяйством можно рулить через getSVGDocument():

JavaScript
var SVGDocument = document.getElementById("svg64").getSVGDocument();
var svg = SVGDocument.documentElement;
svg.setAttribute("width", 100);
svg.setAttribute("height", 100);
alert(new XMLSerializer().serializeToString(SVGDocument));

Пара примеров в архиве (zip, 11kb).

Если выйти за рамки стоящей задачи (имеем дело с расширением), то стоит напомнить, что тэга EMBED в (X)HTML нет, но обойтись тэгом OBJECT в данном случае не получится из-за бага 287465 «We should implement the GetSVGDocument interface for HTMLObjectElement». В принципе, никто не мешает обойти валидатор непосредственно в самом JavaScript,.. как обычно.

Самое поганое: при обновлении страниц (Ctrl+R, но не Ctrl+Shift+R) получаю «Permission denied to get property SVGDocument.documentElement» (можно посмотреть на файле svg64test.xhtml). Сижу, матерюсь, понимаю, что мне опять любопытно, да только времени на эти танцы уже нет.

Баловство на закуску:

<img width="64" height="64"
src="javascript:'#define width 4\n#define height 4\n'+
'static char bits[]={0x05,0x0a,0x05,0x0a}'"/>

Categories: dHtml | comments: (3)

Комментарии

Комментарии временно отключены.