Replacing header/user image with something else

julian

@NodeHam Are you referring to the user "cover photo"?

phenomlab

@NodeHam said in Replacing header/user image with something else:

Therefore, I find what I've read hard to believe so thought I should ask here.

It's possible to perform something called Clickjacking, which is a malicious technique used by attackers to trick users into clicking on something different from what they perceive they are clicking on. Also known as UI redress attack or user interface (UI) deception attack, clickjacking involves overlaying an invisible layer over a legitimate webpage or interface element, such as a button or link. When the user interacts with what they see on the webpage, they are unknowingly interacting with the hidden elements, which could be links to malicious websites, downloading malware, or performing unwanted actions like giving access to personal information.

For instance, an attacker might overlay an invisible button over a "Download" button on a legitimate website. When a user tries to download something from the website, they unwittingly click the invisible button, triggering a download of malware instead.

Clickjacking attacks can be carried out through various means, including iframes, CSS opacity, or other web technologies. To protect against clickjacking, web developers can implement security measures like frame-busting scripts, X-Frame-Options HTTP header, or Content Security Policy (CSP) directives. Additionally, users should be cautious when interacting with unfamiliar or suspicious websites to avoid falling victim to clickjacking attacks.

As an example

<!DOCTYPE html>
<html>
<head>
    <title>Clickjacking Example</title>
    <style>
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0; /* Make the iframe invisible */
            z-index: 9999; /* Ensure it's above other content */
        }
    </style>
</head>
<body>
    <h1>Welcome to Our Website!</h1>
    <p>Click the button below to claim your prize:</p>
    <button onclick="claimPrize()">Claim Prize</button>

    <!-- Invisible iframe overlaying a legitimate website -->
    <iframe id="overlay" src="https://legitimatesite.com"></iframe>

    <script>
        function claimPrize() {
            // Code to handle claiming the prize goes here
            alert("Congratulations! You've won a prize!");
        }
    </script>
</body>
</html>

Using relatively simple techniques, it's possible to inject malicious code into your own site. As you alluded to, securing using the correct headers is a good start, but if it were me, I'd avoid this altogether.

NodeHam

Yes, cover picture/photo is what I mean I think. The two images you can put on top of your profile page. One is the small round icon and the other one is like your header on FB for example. Both seem to be called cover picture.

First, I realized immediately after posting that using a plugin IS the way to not break updating and depending on the updates, the plugin would have to be updated too.

Second, yes, poorly configured security could allow someone to clickjack but using X-frame and other headers is typically used to mitigate those kinds of problems.

I'm not sure what you're suggesting however. Are you saying it would be a bad idea to use an iframe in the way I'd like to or that it can be done, just have to be careful to use good security?

My interest is basically to try making our forums a more usable and interactive environment than simply support questions being answered. I'd love to use nodebb if possible.

NodeHam

So is this something that's possible and should I be looking at developing a plugin?

NodeHam

Did I post this in the wrong place?

<baris>

You can override the template partials/account/header.tpl for harmony in a plugin. Not sure how replacing those with an iframe will make it more usable or interactive but it's possible.

NodeHam

I basically am wondering if I could embed something else in that area, an iframe of another application.

NodeHam

Can anyone offer a little insight on where we might get started on something like this, perhaps which page/s need to be modified, etc along with some idea of using a plugin for this which I assume is what we'll have to develop to survive upgrade. Any other tidbits of information would certainly be appreciated.
Would love to see if nodebb could be the solution for an upcoming project.

phenomlab

@NodeHam Sorry for late response. Can you provide a bit more detail as to what you want to achieve? For example, would the iframe component be the same for each user, or would each user have something different?

One cheap way to accommodate this would be via NodeBB's hooks, and a custom jQuery function in lieu of a plugin.

NodeHam

In fact, what we want to do is to embed a grafana dashboard into that section to show data from another app that we have for the user. Grafana was using iframe but this latest update changes that to an API.