Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

With AngularJS 1.7 the data-src attribute of an image gets automatically replaced #16734

Closed
1 task done
fbrandel opened this issue Oct 16, 2018 · 7 comments · Fixed by javascript-indonesias/angular.js#122
Closed
1 task done

Comments

@fbrandel
Copy link

I'm submitting a ...

  • bug report

Current behavior:
The data-src attribute of an image gets replaced with the value of the src attribute

Expected:
The data-src attribute contains the original value.
As the image is plain HTML, and has no obvious directives bound to it, I would expect that nothing is changed for this element. With version 1.7 this somehow changed.

Steps to reproduce
See Plunker (http://plnkr.co/edit/bpouxUmsXretMfcb)

  • With AngularJS version 1.7 the data-src attribute changes to the value of the src attribute (Red border)
  • With AngularJS version 1.6 the data-src attribute contains the original value (Green border)

AngularJS version: 1.7.x
Browser: all

@petebacondarwin
Copy link
Contributor

petebacondarwin commented Oct 16, 2018

This was introduced in dedb10c by our work on adding support for arbitrary property and event bindings.

It seems that we map src and data-src to the same src property on $attrs - then there is a watch handler on the src value, which then writes back to src and data-src.

Any thoughts @jbedard?

@jbedard
Copy link
Collaborator

jbedard commented Oct 16, 2018

@petebacondarwin you sure it was dedb10c not something earlier like 1e9eadc? From a quick test the plnkr seems to still have the issue when changing to v1.7.0 but not v1.6.10... (either way I'm interested in investigating more).

From my initial investigation... seems like we're settings 2 $interpolate watchers on the img[src]. One reads img[src], one reads img[data-src] and both assign to the src. In this case data-src just happens to come second and overwrites the first.

I'm pretty sure we shouldn't even be creating that interpolate directive since there's no interpolation in those attributes. But the trustedContext is "mediaUrl" (since 1e9eadc?) so contextAllowsConcatenation is true and we don't exit. Do we need an interpolate function on a constant/no-interpolation src property? What should a constant/no-interpolation data- prefixed attribute do?

@petebacondarwin
Copy link
Contributor

Oops. yes it was not your commit @jbedard ! It is a problem with 1.7.0.rc.0 too.

@petebacondarwin
Copy link
Contributor

I agree we should not have a directive on a non-interpolated attribute.

petebacondarwin added a commit that referenced this issue Oct 18, 2018
By creating attribute directives that watch the value of
media url attributes (e.g. `img[src]`) we caused a conflict
when both `src` and `data-src` were appearing on the
same element. As each directive was trying to write to the
attributes on the element, where AngularJS treats `src` and
`data-src` as synonymous.

This commit ensures that we do not create watchers when
the media url attribute is a constant (no interpolation).

Fixes #16734
@petebacondarwin
Copy link
Contributor

Hopefully #16737 will fix this

petebacondarwin added a commit to petebacondarwin/angular.js that referenced this issue Oct 24, 2018
By creating attribute directives that watch the value of
media url attributes (e.g. `img[src]`) we caused a conflict
when both `src` and `data-src` were appearing on the
same element. As each directive was trying to write to the
attributes on the element, where AngularJS treats `src` and
`data-src` as synonymous.

This commit ensures that we do not create create such directives
when the media url attribute is a constant (no interpolation).

Because of this (and because we no longer sanitize URLs in the
`$attr.$set()` method, this commit also updates `ngHref` and
`ngSrc` to do a preliminary sanitization of URLs in case there
is no interpolation in the attribute value.

Fixes angular#16734
petebacondarwin added a commit to petebacondarwin/angular.js that referenced this issue Oct 24, 2018
…ributes

By creating attribute directives that watch the value of
media url attributes (e.g. `img[src]`) we caused a conflict
when both `src` and `data-src` were appearing on the
same element. As each directive was trying to write to the
attributes on the element, where AngularJS treats `src` and
`data-src` as synonymous.

This commit ensures that we do not create create such directives
when the media url attribute is a constant (no interpolation).

Because of this (and because we no longer sanitize URLs in the
`$attr.$set()` method, this commit also updates `ngHref` and
`ngSrc` to do a preliminary sanitization of URLs in case there
is no interpolation in the attribute value.

Fixes angular#16734
petebacondarwin added a commit to petebacondarwin/angular.js that referenced this issue Oct 24, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
…ributes

By creating attribute directives that watch the value of
media url attributes (e.g. `img[src]`) we caused a conflict
when both `src` and `data-src` were appearing on the
same element. As each directive was trying to write to the
attributes on the element, where AngularJS treats `src` and
`data-src` as synonymous.

This commit ensures that we do not create create such directives
when the media url attribute is a constant (no interpolation).

Because of this (and because we no longer sanitize URLs in the
`$attr.$set()` method, this commit also updates `ngHref` and
`ngSrc` to do a preliminary sanitization of URLs in case there
is no interpolation in the attribute value.

Fixes angular#16734
@penfold
Copy link

penfold commented Oct 25, 2018

It looks like this is also causing issues with ui-sref where there is also a href="" present.

Is it possible to have an official release with this fix in?

I've temporarily patched in the change from the PR and it has fixed the problem for me.

@petebacondarwin
Copy link
Contributor

Thanks for testing with your scenario. We should be able to merge this soon and hopefully have a new release out early next week.

petebacondarwin added a commit that referenced this issue Nov 20, 2018
…ributes

By creating attribute directives that watch the value of
media url attributes (e.g. `img[src]`) we caused a conflict
when both `src` and `data-src` were appearing on the
same element. As each directive was trying to write to the
attributes on the element, where AngularJS treats `src` and
`data-src` as synonymous.

This commit ensures that we do not create create such directives
when the media url attribute is a constant (no interpolation).

Because of this (and because we no longer sanitize URLs in the
`$attr.$set()` method, this commit also updates `ngHref` and
`ngSrc` to do a preliminary sanitization of URLs in case there
is no interpolation in the attribute value.

Fixes #16734
petebacondarwin added a commit that referenced this issue Nov 20, 2018
…ributes

By creating attribute directives that watch the value of
media url attributes (e.g. `img[src]`) we caused a conflict
when both `src` and `data-src` were appearing on the
same element. As each directive was trying to write to the
attributes on the element, where AngularJS treats `src` and
`data-src` as synonymous.

This commit ensures that we do not create create such directives
when the media url attribute is a constant (no interpolation).

Because of this (and because we no longer sanitize URLs in the
`$attr.$set()` method, this commit also updates `ngHref` and
`ngSrc` to do a preliminary sanitization of URLs in case there
is no interpolation in the attribute value.

Fixes #16734
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants