Better iframe

Xavier

Aurorum/Flarum-Better-Iframe

Basic introduction:

This project is an extension of flarum, an open resource forum web application. This extension allows users to embed a webpage into their posts, using the iframe element.

How to install:

First of all, you need to have a Flarum website, with composer already installed. Then, run the following command in the shell, at the root dictionary of your flarum.

composer require aurorum/flarum-better-iframe

How to update:

Run the following commands:

composer update aurorum/flarum-better-iframe
php flarum migrate
php flarum cache:clear

How to use:

This extension allows some iframe attributes to use in Flarum, you can use the code like this to use iframe in your post:

<iframe src="URL"></iframe>

Also, attributes like "style", for inline css are allowed, thus, you can use any of the following attributes, just the same as writing in HTML, a full attributes used example would look like this:

<iframe src="URL" style="CSS" scrolling="yes/no" allow="attribute"></iframe>

How to use `<iframe>`:

Please read this document: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

中文：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

Demo:

Live demo: https://dev.aurorum.co/d/88-aurorumflarum-better-iframe-demo (如果在中国大陆，可能不能打开此链接)

Demo picture:

Some related sources, if you like my extension, please give me a star on github.

Github: https://github.com/Aurorum-Studio/flarum-better-iframe

Dev Website: https://dev.aurorum.co/d/90-aurorumflarum-better-iframe

Support Forum: https://discuss.flarum.org/d/32332-better-iframe

If there is any issue, please contact ,with support forum, dev website, or github issues.

ash3T

Xavier Thanks for this extension.

Just to let you know that none of the iframe bbcode works on my site.

Here is a screenshot

And the other BBCode - iframe extension works before I turn it off.

Flarum 1.6.3
PHP 8.0.27
MySQL 5.7.41

ash3T

Thanks for your reply. I did clear my cache before.

But now it works. Thanks.

Xavier Hi, I tried this extension with my two flarum sites, and wonder about these features:

1.since I have installed BBCode - iframe before.

And it uses: [iframe="URL"]

However, yours uses [iframe='URL'].

This difference creates conflict, since if I use yours then all the previous the " in [iframe="URL"] will need to change to '. Or these iframes won't show up.

I have used all the elements on my site. Only the last two which work.

[iframe='URL' width='INT1' height='INT2' frameborder='INT3' marginwidth='INT4' marginheight='INT5' scrolling='TEXT2' allowtransparency='TEXT1']

I am not sure why? Would you please take a look? Here is the link

Thanks very much.

For your information:
I have disabled BBCode - iframe and enabled Better-Iframe on this site.

ash3T

You are right about this. I have added </iframe> in the end of each <iframe>, the issue went missing.

@Xavier By the way, you may want to update the following part

Xavier How to use:
This extension allows most iframe elements to use in Flarum, you can use any of the following formats in your flarum post to use iframe.

with the new

Xavier <iframe src="URL" style="CSS" scrolling="yes/no" allow="attribute">

Thank you both clarkwinkelmann and Xavier Yay!

luceos

Nice! You should delete the vendor directory from your git though. It adds to the size of your extension.

luceos

ash3T clear your cache from the terminal php flarum cache:clear

Xavier

ash3T I'll check this, originally, I made this extension only for my own website, it's possible that I made something wrong when I made it to a public extension. It might take several days for me to find out what's wrong, and how to solve, because it's the beginning of the semester, and I have a lot of homework/exams to do/prepare, but I'm sure that I will reply to you with a solution within two weeks.

Xavier

ash3T It's about two weeks now, I have tested this extension on five websites, and two of them could have all the attributes working, while the other three can't. This is pretty strange, I'll check some of my other settings, to find out what's wrong. I think it's might caused by some change of other configurations on s9etextformatter that I made previously, I'll try to make this extension more globally in a short term of time. Before that, I'll update a version with plausible attributes settings for iframe in two days, and I think I'll figure out how to make the full customized extension work globally in two weeks. It shouldn't be difficult, I'll reply to you again as soon as I finished the full customized extension.🦊🦊

MarthaSimons

iframe is disable in BBCode? 🤔

ash3T

Xavier Hi, Just wondering how things are going? Waiting for your updates. Wish you all the best. 😃

Xavier

ash3T I just updated it, or, upgraded it. I used a new method to achieve it. I'm not quite sure if it would work on all flarum websites, but I think it worth a try.
You can update your extension to v2.0.0, and this version make you able to directly use <iframe> element and some of its attributes. For example, you can use

<iframe src="URL"></iframe>

Also, attributes like "style", for inline css are allowed, thus, you can use any of the following attributes, just the same as writing in HTML:

<iframe src="URL" style="CSS" scrolling="yes/no" allow="attribute"></iframe>

If you need help in how to use <iframe> element, you can read this MDN doc : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe .

I'm planning to add all iframe attributes available in this extension in the future.

Wish you all the best.

p.s. If you have any feedback, good, or bad, please tell me.

ash3T

Xavier

Hi, Thanks for working on this extension.

Now, I can use the CSS attribute to customize the iframe size. However, it appears that all the other content after the iframe got lost. I am not sure why. Just show you a screenshot.

As you can see there is a poem below the iframe. And it went missing.

By the way, if I use 5 iframe in one post, it only shows three of them, and the content after the three iframe went missing as well.

clarkwinkelmann

ash3T Xavier I think the <iframe> HTML element needs a closing tag. I see it's using the HTMLElements TextFormatter plugin so I'm pretty sure it automatically includes all the remaining text of the post as its child if the closing tag is missing, just like with bbcode.

Xavier

ash3T You are right, I forgot to write this, it's my mistake. I have changed it, and I'll update a version with all iframe attributes in MDN available.

Xavier

V2.0.0 Update Note:

Abandoned the BBcode method, and use HTMLElements instead.

The usage change to:

<iframe src="URL"></iframe>

Also, attributes like "style", for inline css are allowed, thus, you can use any of the following attributes, just the same as writing in HTML, a full attributes used example would look like this:

<iframe src="URL" style="CSS" scrolling="yes/no" allow="attribute"></iframe>

Todo list: Make all <iframe> attributes in MDN available. && Rewrite readme.md.

Xavier

V2.0.1 Update Note:

Allowed all <iframe> attributes. The detailed usage can refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe .

To update, run

composer update aurorum/flarum-better-iframe
php flarum migrate
php flarum cache:clear

clarkwinkelmann

I don't think srcdoc should be allowed. It seems like it has full access to the window.parent object so it can be used to hijack the session of anyone who loads the post.

<iframe srcdoc="<script>alert('CSRF Token: ' + (window.parent.app.session?.csrfToken || 'not accessible'))</script>"></iframe>

Just in general, the allowfullscreen property without specific white-listed domains is also dangerous because it could be used to open a clone of the website in full screen to trick a user into entering their credentials.

Xavier

clarkwinkelmann I have thought about this problem before, and I also doubt if I should add "Deprecated attributes" in this extension, but at last, I thought, I'll make all of them available, and add a control button in the admin part to let the website administers to determine to allow unsafe attributes, like srcdoc, and the deprecated attributes, or not. However, it seems that I am too busy to make it. I have plenty of exams these two months. Thus, I'll delete the unsafe attributes, like srcdoc, until I have time to make the control button in the admin part, or (hopefully) someone has time to do it, and add a pull request to this project.

Xavier

V2.0.2 Update Note

Remove the attributes srcdoc, and allowfullscreen for security consideration.
Add a safety guide in the composer.json project description to inform the webmasters that the unsafe attribute allow is available, and tell them how to disable it.
Todo List (Pull request for doing this todo list is very welcomed.)
- Add a control button in the admin part to let the website administers to determine to allow unsafe attributes, like srcdoc, and the deprecated attributes, or not.
- Add a safety guide in the admin part.
- Update readme.md

LoneDev

Would be nice to add permission to use this tag, I don't want the whole forum to be able to embed iframes.

Xavier

LoneDev Yeah, it's a good suggestion, I would do that when I'm free.