Pass a CSS selector as value to heightCalculationMethod

[robsonsobral]

Hey!

May I suggest a feature?

To allow a CSS selector to be used as value to heightCalculationMethod. The target element would then be used as reference to the height of the iframe.

The validity of the selector can be checked this way:

const queryCheck = (s) => document.createDocumentFragment().querySelector(s);

function isSelectorValid(selector) {
  if (typeof selector !== 'string') return false;
  try { queryCheck(selector); } catch { return false; }
  return true;
}

Thank you for your attention, @davidjbradshaw !

[davidjbradshaw]

Interesting idea

[robsonsobral]

Like me, there's a lot of devs having issues with Metabase. This could be fixed like this, then:

iFrameResize({ heightCalculationMethod: '#root' }, '#metabase');

It would be much more performant than taggedElement.

[davidjbradshaw]

I would welcome a PR.

One issue is currently the message between frames uses : as a field deliminator

[robsonsobral]

Oh, I see!

 var data = initMsg.slice(msgIdLen).split(':')

And:

var data = msg.slice(msgIdLen).split(':')

(Why not to encode as JSON, @davidjbradshaw ? To save some bytes?)

However, as : in QuerySelectors needs to be double scaped, we can use a RegEx to split the parts of the message. Right?

We could simply URL encode them. What do you think?

[davidjbradshaw]

It was originally written a decade ago to work in IE8 without libraries.

The message format is compatible back to version one, so that the two JS files don’t need to be matching versions.

It would be a little ugly, but it would be better to encode the selectors to not have colons in them in the message and then convert it back in the iframe. URLencode would work,

[davidjbradshaw]

Thinking a bit more there is also a security aspect to think about. This would also need a flag to enable in the iframe. Some applications consider the parent page being able to hide part of the iframe a security issue.

[robsonsobral]

The message format is compatible back to version one, so that the two JS files don’t need to be matching versions.

This is great! I respect that!

---

Some applications consider the parent page being able to hide part of the iframe a security issue.

I didn't get this. What do you mean? From the iframe perspective, we would be just following the same path as the taggedElement setting.

[davidjbradshaw]

With taggedElement the selected element is controlled by the iFrame. If you pass a selector from the parent page, then this is no longer in the direct control of the iframe and could possibly be miss-used.

One way around this would be to just set heightCalculationMethod: ‘selector’ and then have an option in the iframe for the selector.

[robsonsobral]

If you pass a selector from the parent page, then this is no longer in the direct control of the iframe and could possibly be miss-used.

Even if we check it to make sure it's really a selector?

One way around this would be to just set heightCalculationMethod: ‘selector’ and then have an option in the iframe for the selector.

This is exactly the same as the taggedElement.

[robsonsobral]

New project and I'm back to this.

Now, I get the point of misuse the selector! It would open a door to bad use, which would put more responsibility over the iframe content.