Skip to content

Commit

Permalink
fix: support non-canonicalised srcset attribute name #2958 (#2968)
Browse files Browse the repository at this point in the history
Some frameworks, like React, use non-canonicalised attribute names. The
spec and browsers allow this, but hammerhead is only checking if the
attribute name without canonicalisation matches `srcset`.

By using the `loweredAttr` for the comparison, hammerhead will be more
accepting of inputs and resolve srcset issues with React projects
(fixes #2958).

See facebook/react#10863 for more background.
  • Loading branch information
gg-kialo authored Oct 24, 2023
1 parent 3117eb4 commit d76f0c3
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/client/sandbox/node/element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export default class ElementSandbox extends SandboxBase {
const tagName = domUtils.getTagName(el);
const isUrlAttr = domProcessor.isUrlAttr(el, attr, ns);
const isEventAttr = domProcessor.EVENTS.indexOf(attr) !== -1;
const isUrlsSet = attr === 'srcset';
const isUrlsSet = loweredAttr === 'srcset';

let needToCallTargetChanged = false;
let needToRecalcHref = false;
Expand Down
10 changes: 10 additions & 0 deletions test/client/fixtures/sandbox/node/methods-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,16 @@ test('setAttribute: img src', function () {
strictEqual(nativeMethods.getAttribute.call(img, 'src'), urlUtils.resolveUrlAsDest('/image.gif?param=value'));
});

test('setAttribute: img srcSet', function () {
var img = nativeMethods.createElement.call(document, 'img');

processDomMeth(img);

img.setAttribute('srcSet', '/image.gif?param=value 1x, /imagex2.gif?param=value 2x');

strictEqual(nativeMethods.getAttribute.call(img, 'srcset'), urlUtils.resolveUrlAsDest('/image.gif?param=value 1x, /imagex2.gif?param=value 2x', true));
});

test('canvasRenderingContext2D.drawImage', function () {
var storedNativeMethod = nativeMethods.canvasContextDrawImage;
var crossDomainUrl = 'http://crossdomain.com/image.png';
Expand Down

0 comments on commit d76f0c3

Please sign in to comment.