orestbida/iframemanager

🍪 GDPR friendly iframe manager written in vanilla js

Hi there 👋

iframemanager's Issues

Use `rem/em` units rather than `px`

rem/em is a safer choice (safari doesn't like px based units).

Support all configurations in the div

Hi! We are using your Cookie Consent javascript plugin (😍) and the IframeManager looks like a very interesting companion for that!

For simplicity of the use, could you consider a possibility of supporting the service configurations fully straight in the div and using the same languages object for all iframes?

That would make using this plugin a much more versatile in situations when the client can update their content through some CMS and add new embeds as they wish. The current way of defining each embed separately on config is hard to achieve, when embeds change dynamically. With the approach of supporting all configs in the div, it would become much more easier just to do some regexp and replace the iframe embed with the div.

Is it possible to read the accepted/rejected cookies from iframemanager and show them in cookieconsent?

I got it to work so I can accept a cookie category in cookieconsent and have it also accept/deny the appropriate ones for iframemanager. Is it possible the other way round? So someone rejects the "external" category in CC, but then clicks on "Don't ask again" on an embedded YT iframe. This will not show up in CCs settings, since I cannot read it the other way round - or did I miss something?
Cheers!

When integrating with CookieConsent it still sets cookies

It would be great if IframeManager could have an option to disable cookies. If using CookieConsent integration it's all handled there. It just makes documenting the cookies a bit easier as with the current setup you end up documenting every cookie for every service setup when really you could cover it all under a single cookie (CookieConsent's)

Support for dynamically rendered iframe like twitter widget

Support for dynamically added iframes like:

<a class="twitter-timeline" data-tweet-limit=5 href="someTwitterUrlHere"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8" data-cookiecategory="twitter" type="text/plain"></script>

Ref: orestbida/cookieconsent#195

Is it possible to combine iframemanager with cookieconsent?

Is there a way to accept the iframes in the cookieconsent menu?

Turn off cookies

I have a website that doesn't currently store any user data, and I'd like to use this plugin to require consent to load in embedded video. I'd rather not have to add a GDPR cookie disclosure just to save GDPR consent information, so is there a way to turn off cookies on this script and just require the user to consent every time they want to load in a video?

Load iframes when a category from Cookie Consent is accepted

Is there a way to allow load iframes when a category gets accepted from CookieConsent per default but allow the single-service management when not authorized?

I mean, one with allowed marketing cookies will get iframes loaded. The others could agree only to YouTube service on iframe. If they'll later eventually agree and disagree with marketing, the consent will be removed as well for YT.

I load the IframeManager only when the iframe is used in the WordPress Content (created a super simple plugin), and CookieConsent is running on all pages. Maybe a parameter will check the specified category before using cc_youtube or cc_vimeo? Or did I miss something?

P.S. Thanks for a great tool, hope you enjoy your ☕

Merge cookies + automatically generate <div> around

Hi there,

Two questions:

Is it be possible to merge all the active services cookies into only one json cookie? (a bit like the cookieconsent script does!).
A unified cookie would be also easier to be specified within the cookieconsent modal cookie_table

I've read about some questions from last year about dynamically generated iframes and the idea of creating automatically the

around them deducing its properties through regex. Is there any progress about that?
It would be extremely helpful to integrate iframemanager within a CMS!

Thanks!

Integration with cookieconsent

Discussed in #22

^{Originally posted by jelen07 August 24, 2022}
Hi, is there any way how to integrate those two tools together?

UC

1. User add positive consent with category, which include YouTube videos.
2. There is no need to requride additional consent for iframemanager, because it was already given by cookieconsent.

and vice versa.

Twitter/X "Read More" not clickable

Apparently Tweets or other name "posts" on X get either rendered as images now or theres a bug
with the links now: Clicking "Read more on X" has no effect.
But last time I checked this and it worked X was still called Twitter.
So not sure if it is the iframemanager or on Xs site thats causing the issue.

Parameters defined in the configuration are also added to the iframe as an attribute

When setting parameters using the iframe configuration, those params are added to the embed URL, but the <iframe> also gets an param attribute with the specified string:

vimeo: {
    embedUrl: 'https://player.vimeo.com/video/{data-id}',
    iframe: {
        allow: 'fullscreen; picture-in-picture, allowfullscreen',
        params: 'title=0&byline=0&portrait=0',
    },
},

Results in this HTML:

<iframe allow="fullscreen; picture-in-picture, allowfullscreen" params="title=0&byline=0&portrait=0" lazy="" title="Vimeo" src="https://player.vimeo.com/video/252417024?title=0&byline=0&portrait=0"></iframe>

The params attribute should not be there.

Some ideas how to solve this:

• Is the params configuration even required? The parameters can just be added to the embedUrl.
• The params configuration value should be handled specially and not added as an attribute.
• More generically, maybe it makes sense to split the iframe configuration and attributes into separate configs?

Example for leaflet map with open street map layer?

Could/should I use iframemanager to embed a leaflet map in a gdpr complient way? Is there some example? Or can you recommend a different solution?

I would like to define the leaflet map and its layers on the same web page but defer the loading of background layers from external servers until a user explicitly confirms it.

=> Instead of an embed url, can I also specify some html content (containing the map definition) directly?

Related: #9

Handle non-js-browsers, allow them to get to the external service as well.

Idea: Initially we could add a
<a href="urlOfExternalService" rel="noreferrer">SomeTitle</a>
either as the thing to be replaced instead of the div or we can add it inside the div and the javascript will remove the link once triggered (it could have some data-cc-nonjs attribute or something.

[Bug]: invalid iframe src when `iframe.params` is an empty string

[Bug]: loaded iframes outside viewport are not reset

If a specific service is accepted, and there is at least one iframe not visible in the viewport, calling .rejectService('<specific_service>') does not reset the iframe. Instead, as soon as you scroll to that iframe, it will load as if the rejectService method was never called.

This occurs with specific services only:

• .rejectService('all') ok
• .rejectService('youtube') fail

add support for more aspect ratios

By default, iframes will use a 16:9 aspect ratio (unless custom css is used). Add data-ratio attribute for more flexibility.

Support for Slideshare.net

I am looking into support for Slideshare.net

Is there a way to sponsor this feature (with a small budget)?

Add build tools

Set up rollup or vite.

Terser + postcss are enough for now.

Add an option to hide the overlay if consent has already been given

Follow-up to the discussion in #10

Some external content may require external resources to load before it can be displayed, some will be visible almost immediately. In the first case, showing the overlay and then fading it out (the current behaviour) makes sense. But if the external content will be displayed immediately, having the overlay just show up very briefly and then fade out immediately doesn't look great, it looks more like a bug to the users.

As a solution, I suggest an optional option (either for the entire library or for individual services) to adjust this behaviour. If activated, the option should change the behaviour as followed:

• If no consent has been given for the service, the overlay should be displayed normally and fade out as it currently does.
• If consent has already been given for the service when the library is initialized, the library should skip showing the overlay and immediately reveal the external content (and call the onAccept callback).

Help for using with Docusaurus

Hello,

Thanks for this neat proposition !

I am trying to get this working with Docusaurus.

While I get it working when I load the page where the iframe is embedded (for example https://opencomp.github.io/docv2/saisir-les-resultats/utiliser-opencomp-genie/detecter-les-resultats/#en-savoir-plus-sur-les-diff%C3%A9rents-statuts-de-traitement-possibles), if  I load another page then browse to a page where the div element is inserted, the javascript is not triggered. This is due to the Single Page Application architecture used by Docusaurus v2 / react but I have no idea how to get this working on page change ?

Any idea / guidance to get this working ?

Thanks 🙂

Button properties not accessible via custom properties

Hi there!

It would be neat if button properties like box-shadow, border-radius or padding were accessible via custom properties. That way, one wouldn't need to override the somewhat cryptic class names.

Thanks!

Add typescript types [v2]

Could this concept be used with Google Maps

Hello, could this concept be used to get approval first with Google Maps before publishing the maps? If so, how would you do that?

Build `esm` and `umd` variants [v2]

iframe created twice onAccept

On some occasions, iframes get created twice — happens with custom “widgets” like twitter's ones.

iframemanager doesn't work

Hello,
I am trying to use the iframemanager together with the cookieconsent plugin. The cookieconsent works, but the iframemanager does not.

Code:
https://pastebin.com/E5EYbpEe

I hope someone can help.

Ist there a way to re-run?

Hi,

i am loading some video portfolios via ajax on an wordpress theme. Is there a way to re-run the script to detect the that are new to the dom?

Thanks for your help!

Cheers
Tobias

SvelteKit

I have a hard time getting this to work with SvelteKit.

The div stays black and I get the following error in console:

Outside a Svelte component, it works fine. The strange thing is, it worked a few times within a Svelte component. But after another reload it was gone (nothing changed). Now I can't reproduce the working state ... Could you provide a SvelteKit example in StackBlitz?

Currently, I have the css and js part via CDN in app.html and also tried to load them with svelte:head inside the component.

Google maps embed marker not showing

Hi,

I'm trying to get this to work with the normal embed iframe (not through the embed api) e.g. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d40299.30426384719!2d4.340397959224176!3d50.85511876045215!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3a4ed73c76867%3A0xc18b3a66787302a7!2sBrussel!5e0!3m2!1snl!2sbe!4v1666528240497!5m2!1snl!2sbe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>. When loading the iframe, the src string is encoded (video.iframe.src = encodeURI(src);), which prevents the marker from being rendered. When removing the encodeURI() function, the marker is render correctly.

Could you add a flag to disable the encoding?

Kind regards,
Tom

How to size the div?

I am embedding a google map, but using the iframemanager the resulting maps is very small. I tried to set the width and height manually in the div, but it does not change size?

<div class="map-area" data-service="googleMaps" data-id="map1" width="100%" height="450px"></div>

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')

Hi, I'm using the latest RC of CookieConsent 3 but I can't reassemble this example https://stackblitz.com/edit/web-platform-mwccsc?file=index.js - I always get this kind of error and I can't explain myself why:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at H (iframemanager.js:6:3380)
    at Object.acceptService (iframemanager.js:6:4372)
    at onAccept ((Index):172:43)
    at W (cookieconsent.js:7:3657)
    at e.run (cookieconsent.js:7:20793)
H @ iframemanager.js:6
acceptService @ iframemanager.js:6
onAccept @ (Index):172
W @ cookieconsent.js:7
e.run @ cookieconsent.js:7
await in e.run (asynchron)
(anonym) @ (Index):127

Use {data-id} on notice

In one use case, it was necessary to pass the {data-id} variable within the printed message, and this variable was not rewritten by the token.
After analyzing the code, this update was possible by changing one line of code (line 568) to this:
notice && notice_text.insertAdjacentHTML('beforeend', noticeText.replaceAll(DATA_ID_PLACEHOLDER, serviceProp._id) || '');
Right now the code is working.

Support for iframe-video-area with a preview image first

What we want for video-iframes is this:

Editor set up an area that shall contain an embedded video and may also specify an (internal) preview-image.

Visitor sees initially: (both those that not has accepted and those who has accepted that category)
Preview-image and a play button on top of it.
If editor did not specify a preview-image a default is used.
(I.e. it only load data from us, never the external service)

When visitor presses image or play-button:

If visitor has accepted that service, the video with the iframe is displayed. (loading data from external service)

If visitor not (yet) has accepted it displays a text and buttons on top of the image (white-faded). Just as iframemanager looks like when you not yet have accepted the service.
"Accept this", and ( "Accept all of type X" or "Open cookie settings" ). The first one only loads the iframe of that vidoe and the second one calls cookieconsent to accept all of that type or open dialog.

NOTE: Currently I have set this up myself with cookieconsent, and are not (yet?) using iframemanager.

How to iframe with arguments?

Hi, love the project!

However, can I add iframe arguments like width etc.?

For example, this one:

<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shr5EBHUmHzStubDx?backgroundColor=orange" frameborder="0" onmousewheel="" width="100%" height="1541" style="background: transparent; border: 1px solid #ccc;" loading="lazy"></iframe>