Fixed AMP URLs not being transformed to absolute (#12737)

refs https://github.com/TryGhost/Team/issues/467
refs https://github.com/TryGhost/Ghost/pull/12731

- AMP helper fetches HTML directly from the database rather than fetching via the API so we can't rely on the API serializers to perform transforms for us
- switched the `relativeToAbsolute(html)` call to `transformReadyToAbsolute(html)` to match the new `__GHOST_URL__` storage format
This commit is contained in:
Kevin Ansfield 2021-03-06 09:43:50 +00:00 committed by GitHub
parent 28f0bc6bd2
commit ee6ca9b654
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 5 deletions

View File

@ -119,8 +119,8 @@ function getAmperizeHTML(html, post) {
amperize = amperize || new Amperize(); amperize = amperize || new Amperize();
// make relative URLs abolute // make transform-ready URLs abolute
html = urlUtils.htmlRelativeToAbsolute(html, post.url); html = urlUtils.transformReadyToAbsolute(html);
if (!amperizeCache[post.id] || moment(new Date(amperizeCache[post.id].updated_at)).diff(new Date(post.updated_at)) < 0) { if (!amperizeCache[post.id] || moment(new Date(amperizeCache[post.id].updated_at)).diff(new Date(post.updated_at)) < 0) {
return new Promise((resolve) => { return new Promise((resolve) => {

View File

@ -122,6 +122,30 @@ describe('{{amp_content}} helper', function () {
ampContentHelper.__set__('amperizeCache', {}); ampContentHelper.__set__('amperizeCache', {});
}); });
it('transforms URLs to absolute', function (done) {
const GIF1x1 = Buffer.from('R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'base64');
nock('https://ghost.org/blog/')
.get('/image.png')
.reply(200, GIF1x1);
const testData = {
html: '<a href="__GHOST_URL__/"><img src="__GHOST_URL__/image.png" alt="Test image" /></a>',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1
};
const ampResult = ampContentHelper.call(testData);
ampResult.then(function (rendered) {
should.exist(rendered);
rendered.string.should.not.containEql('__GHOST_URL__');
rendered.string.should.containEql('href="https://ghost.org/blog/"');
rendered.string.should.containEql('src="https://ghost.org/blog/image.png"');
done();
}).catch(done);
});
it('can transform img tags to amp-img', function (done) { it('can transform img tags to amp-img', function (done) {
const GIF1x1 = Buffer.from('R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'base64'); const GIF1x1 = Buffer.from('R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'base64');
@ -130,7 +154,7 @@ describe('{{amp_content}} helper', function () {
.reply(200, GIF1x1); .reply(200, GIF1x1);
const testData = { const testData = {
html: '<img src="/content/images/2019/06/test.jpg" alt="The Ghost Logo" />', html: '<img src="__GHOST_URL__/content/images/2019/06/test.jpg" alt="The Ghost Logo" />',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1 id: 1
}; };
@ -189,7 +213,7 @@ describe('{{amp_content}} helper', function () {
it('removes inline style', function (done) { it('removes inline style', function (done) {
const testData = { const testData = {
html: '<amp-img src="/content/images/2016/08/aileen_small.jpg" style="border-radius: 50%"; !important' + html: '<amp-img src="__GHOST_URL__/content/images/2016/08/aileen_small.jpg" style="border-radius: 50%"; !important' +
'border="0" align="center" font="Arial" width="50" height="50" layout="responsive"></amp-img>' + 'border="0" align="center" font="Arial" width="50" height="50" layout="responsive"></amp-img>' +
'<p align="right" style="color: red; !important" bgcolor="white">Hello</p>' + '<p align="right" style="color: red; !important" bgcolor="white">Hello</p>' +
'<table style="width:100%"><tr bgcolor="tomato" colspan="2"><th font="Arial">Name:</th> ' + '<table style="width:100%"><tr bgcolor="tomato" colspan="2"><th font="Arial">Name:</th> ' +
@ -260,7 +284,7 @@ describe('{{amp_content}} helper', function () {
it('can handle not existing img src by returning not Amperized HTML', function (done) { it('can handle not existing img src by returning not Amperized HTML', function (done) {
const testData = { const testData = {
html: '<img src="/content/images/does-not-exist.jpg" alt="The Ghost Logo" />', html: '<img src="__GHOST_URL__/content/images/does-not-exist.jpg" alt="The Ghost Logo" />',
updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)', updated_at: 'Wed Jul 27 2016 18:17:22 GMT+0200 (CEST)',
id: 1 id: 1
}; };