Security Implications for Gallery Hack & Images Question

Sivoph

Hello, all.

I'm pretty new to Flarum and I needed to get some sort of front page gallery going for my website. I have to give props to justoverclock as I used his/her (sorry) extensions to kind of get a feel for how things worked. I could not compile code properly due to some type of issue with babel parser. I resorted to some "hackery" or "tweaking" of justoverclock's hot discussion card's extension. I included the screenshot.

I used regex to get rid of the text. I'm just not sure if I'm dealing with a string or object, or both (the data is coming through via contentHtml()). Since I'm using m(trust....does this mean I am now vulnerable to SQL injection attacks? How do I sterilize this data? Also, I'm trying to only get the first img tag or url in the data, but it is showing all the images on top of eachother (I will write a blog and all the blog images will stack on top of eachother with the last one showing up because the front page preview is essentially grabbing all the post data). I tried to use regex to get only the first image, but to no avail.

My filter uses 'q' (listdiscussionscontroller) with 'url.' I'm new to Flarum, so I apologize if I am not supposed to be doing this to other peoples' code. Thank you for any insight.

askvortsov

Sivoph hey, welcome to Flarum!

Sivoph I could not compile code properly due to some type of issue with babel parser.

If you share more information on the errors you're getting, we can try and help you fix that.

Sivoph Since I'm using m(trust....does this mean I am now vulnerable to SQL injection attacks? How do I sterilize this data?

That depends on what you're passing to m.trust(). Could you share a code fragment?

Sivoph . I tried to use regex to get only the first image, but to no avail.

Could you share the code for this as well?

Sivoph I'm new to Flarum, so I apologize if I am not supposed to be doing this to other peoples' code. Thank you for any insight.

As long as it's open source you should be completely fine. In fact, we often encourage new extension developers to use other extensions for reference.

Sivoph

Hello, Askvortsov!

I'll disregard the compilation trouble for now and get into the matter at hand:

m.trust((t 
                                         
                                           .firstPost()  .contentHtml()   .replace(/(?<!<[^>]*)(?<Text>[^<>]*)/g, '' )
                                 
                                          
                                           )

I tweaked the filter like so:

 t.prototype.oncreate.call(this, e);
                        n.a.store.find("discussions",{
      filter: {
       
        type: 'discussion',
        q: 'url',
        include:'firstPost,user,tags'
        },
        page: {limit: 6},
        sort: '-commentCount',
        })

Is there any way to get only the first image or url (you can see Youtube embeds also show in the screenshot) in the data and disregard the rest? Currently using some heavy CSS selectoring to get rid of some messiness.

I'm think as contentHTML() is called, the data is returned as a string, but is there anyway to return only the first image or url in the view() function or app store itself?

Thank you.

Justoverclock

Sivoph do you want to retrieve a first image in the first post?

Sivoph

Justoverclock

Hello, Justoverclock. Thanks for all your help.

I would like to retrieve the first image or url in the posts that your hot discussion cards extension is grabbing. Yes, please.

Justoverclock

Sivoph acrually i'm using this function to get the first image of a post (used on frontend blog extension)

export default function GetFirstPostImage(post, key = 1) {
  const regex = /<img(?!.*?class="emoji").*?src=[\'"](.*?)[\'"].*?>/;
  const image = app.forum.attribute('justoverclock-frontend-blog.defaultImage');
  const defaultImg = app.forum.attribute('baseUrl') + '/assets/extensions/justoverclock-frontend-blog/not-found.svg';

  if (post) {
    const src = regex.exec(post.contentHtml());
    if (typeof key === 'number' && key > 0) {
      return src ? src[key] : image ? defaultImg : null;
    } else if (key === '~') {
      return src;
    } else {
      return null;
    }
  }
}

Sivoph

Justoverclock

Thank you, Justoverclock. I will try to make use of this and amend it. I did try something like this:

document.querySelectorAll('img')[0].src

m("script", "document.getElementsByTagName('img')[0].src")

Since I'm guessing it is the virtual DOM, it is not going to work until the page is loaded. I have

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

In the custom head code area and tried it that way. Still didn't work quite well. Going to try out your code somehow and report back. Meanwhile, all tips are welcome 🙂

Thank you, all.