how to limit access to my iframe widget using CSP cookies and http referer

I am developing a web application (like a widget) that my potential clients will use on their websites for the benefit of their users. I was thinking about the best way to deliver the application to them and at the same time be able to control who is using my widget so that I can bill them correctly.

I checked a few previous posts like iframe for a widget and iframe best practices limitations and JS to load iframe but they are 7-10yr old and not exactly what I'm trying to do.

That being said, so far ... the best way to deliver seems to be a combination of:

• iframe
• Content-Security-Policy frame-ancestors HTTP header
• cookies + $http_referer checks on the server side to avoid sneaky users

On the load I'm going to send a secret key with URL to deliver a customized/branded version and I'm planing to rely on cookies for subsequent calls

I have a few questions here:

1. Should I use an iframe tag with specific URL directly, like

   <iframe src="https://superwidget.com/SecretKey=12345678"></iframe>

or should I use a JavaScript to load/create iframe element using the same URL? Is there any benefit from using one or another except being able to defer a load of an iframe in the JS version?

2. So I'm planing to use iframe / CSP / http referer / cookie combo ... Is there any other (better) way to deliver a widget and make sure only allowed audience using it?

3. Anything else I'm missing here

Any help appreciated!

from how to limit access to my iframe widget using CSP cookies and http referer