Live sample images not loading via iframe

[davidfkimball]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

What information was incorrect, unhelpful, or incomplete?

Most of the sample images are broken links - see attached screenshot.

(It is possible that you intentionally chose broken image link images as the sample images...but if so, that's very confusing.)

Specific section or headline?

Functions (#Functions)
and
Combining Functions (#Combining_functions)

What did you expect to see?

Normal sample images.

Did you test this? If so, how?

Refreshed and hard-refreshed the page a few times.
Turned off AdBlockPlus.
Tried it in Chrome and Safari (MacOS). (The broken link image is slightly different in Safari)

MDN Content page report details

• Folder: en-us/web/css/filter
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• GitHub URL: https://github.com/mdn/content/blob/master/files/en-us/web/css/filter/index.html
• Report started: 2021-01-04T16:32:58.279Z

[rachelandrew]

Thanks @davidfkimball - I spotted this today as well when working on that page, so it is being looked into: mdn/content#906

[peterbe]

The problem is that https://yari-demos.prod.mdn.mozit.cloud/files/3708/Test_Form.jpg doesn't load.
I think the problem could be solved if we used https://mdn.mozillademos.org instead for the iframes.

[peterbe]

@escattone How come https://mdn.mozillademos.org/files/3708/Test_Form.jpg but https://yari-demos.prod.mdn.mozit.cloud/files/3708/Test_Form.jpg doesn't?

Ideally, we shouldn't be relying on any images via Kuma but here we are. One problem at a time.
Besides that fancy code we have that can download external images, which is a flaw, to a local image (fixable flaw), only works for images in the HTML like <img src="https://mdn.mozillademos.org/files/12345/foo.jpg">.

[peterbe]

Here's another one: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Using_the_srcset_and_sizes_attributes

It fails because it's trying to download https://yari-demos.prod.mdn.mozit.cloud/files/16797/clock-demo-400px.png which won't work.

[escattone]

@peterbe We should prioritize this tomorrow. We can discuss more tomorrow, but I think we have two choices here:

1. Run our fixable flaws on these images (so they're downloaded to the repo and served the new way). Oh, I see that these image URI's are embedded in the live sample code, and that we don't fix those kinds of flaws yet.
2. Modify kuma to accept yari-demos.prod.mdn.mozit.cloud and yari-demos.stage.mdn.mozit.cloud as safe attachment domains.

[escattone]

@peterbe Another option, a bit more radical, would be to point mdn.mozillademos.org to the same CDN as developer.mozilla.org. This would also be more involved as well. We'd have to have AWS transfer the CNAME from the one CDN to the other, change the DNS, and also add mdn.mozillademos.org to the SSL cert for the primary Yari CDN.

[escattone]

@peterbe I think I've settled on a nice solution until we fix all of these image flaws. I was able to go with option #2 above but with only changes to some Kubernetes environment variables. It's working on stage. See https://developer.allizom.org/en-US/docs/Web/CSS/filter. I'll deploy to prod tomorrow morning.

[escattone]

This is resolved (see https://developer.mozilla.org/en-US/docs/Web/CSS/filter).

[davidfkimball]

?Awesome! ||||||| David Kimball, GIS Specialist ||||||| Massachusetts Department of Conservation and Recreation ||||||| 251 Causeway Street, Suite 600-700, Boston, MA 02114 ||||||| david.kimball@mass.gov 617-626-1447

…

________________________________ From: Ryan Johnson <notifications@github.com> Sent: Tuesday, January 5, 2021 10:31 AM To: mdn/yari Cc: Kimball, David (DCR); Mention Subject: Re: [mdn/yari] Live sample images not loading via iframe (#2331) CAUTION: This email originated from a sender outside of the Commonwealth of Massachusetts mail system. Do not click on links or open attachments unless you recognize the sender and know the content is safe. This is resolved (see https://developer.mozilla.org/en-US/docs/Web/CSS/filter<https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_CSS_filter&d=DwMCaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=QpEgyxWVxR2e-Y7OjMKLfY7zp6WroLB_6-1RzSgjPp4&m=sK2fX7wkrB8Z1KDSjnE8e9fa8ZM62oC0hFFZNQSTi6Y&s=vj_ywfE0qJjA6YF-phYbMbf0QydiccVji7e610-OmJo&e=>). - You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_mdn_yari_issues_2331-23issuecomment-2D754708497&d=DwMCaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=QpEgyxWVxR2e-Y7OjMKLfY7zp6WroLB_6-1RzSgjPp4&m=sK2fX7wkrB8Z1KDSjnE8e9fa8ZM62oC0hFFZNQSTi6Y&s=d1CXdQXgYBJrY5N6x5AAiR47-FUWCpV-AhpDoOM67H8&e=>, or unsubscribe<https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AQTNHPLCMPOH2AOPZMXZUGTSYMWETANCNFSM4VTRS2UA&d=DwMCaQ&c=lDF7oMaPKXpkYvev9V-fVahWL0QWnGCCAfCDz1Bns_w&r=QpEgyxWVxR2e-Y7OjMKLfY7zp6WroLB_6-1RzSgjPp4&m=sK2fX7wkrB8Z1KDSjnE8e9fa8ZM62oC0hFFZNQSTi6Y&s=bUyld95dgKdfVkSzjdoQdGX8EGaGBbfX-a0oKniLDZ4&e=>.

[escattone]

Thanks again for reporting this @davidfkimball!