[BUG] XSS attack prevention

[jdieguez89]

Describe the bug
Image uploads are not currently validated for potential XSS attacks, posing a security risk. While we are using Angular 7, which has some mechanisms to control these attacks, there is a need to update to an external library for more robust protection.

Expected behavior
All uploaded images, particularly SVGs and images, should undergo rigorous validation to prevent any possibility of XSS (Cross-Site Scripting) attacks.

Possible solution

• Implement server-side validation to check and sanitize the SVG files being uploaded.
• Use a robust library like DOMPurify in the frontend to sanitize SVG content.
• Employ Content Security Policy (CSP) headers to add an extra layer of protection.
• Regularly audit and update security measures to address new potential threats.

[jdieguez89]

@c3s4rfred @leonardomoralopez89 @mjabascal10 ,

Here are some steps to prevent XSS. If you find other ways to add an extra security layer, it is very welcome.

1. Validate extension, mime type and try to read the image

add the tika maven dependency

<dependency> <groupId>org.apache.tika</groupId> <artifactId>tika-core</artifactId> <version>2.8.0</version> <!-- Check for the latest version --> </dependency>

Use the class below to validate the image

import org.apache.tika.Tika;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class ImageValidatorUtil {

    private static final String[] ALLOWED_EXTENSIONS = new String[]{"png", "jpg", "jpeg", "ico"};
    private static final String[] ALLOWED_MIME_TYPES = new String[]{"image/png", "image/jpeg", "image/x-icon"};
    private static final Tika tika = new Tika();

    public static boolean isValidImage(File file) {
        try {
            String fileExtension = getFileExtension(file.getName()).toLowerCase();
            if (!isExtensionAllowed(fileExtension)) {
                return false;
            }

            String mimeType = tika.detect(file);
            if (!isMimeTypeAllowed(mimeType)) {
                return false;
            }

            // Attempt to read the image
            BufferedImage bufferedImage = ImageIO.read(file);
            return bufferedImage != null;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
    }

    private static String getFileExtension(String fileName) {
        int dotIndex = fileName.lastIndexOf('.');
        return (dotIndex == -1) ? "" : fileName.substring(dotIndex + 1);
    }

    private static boolean isExtensionAllowed(String extension) {
        for (String allowedExt : ALLOWED_EXTENSIONS) {
            if (allowedExt.equalsIgnoreCase(extension)) {
                return true;
            }
        }
        return false;
    }

    private static boolean isMimeTypeAllowed(String mimeType) {
        for (String allowedMimeType : ALLOWED_MIME_TYPES) {
            if (allowedMimeType.equalsIgnoreCase(mimeType)) {
                return true;
            }
        }
        return false;
    }
}

2. Add .xssProtection() in the SecurityConfiguration

http
            .csrf()
            .disable()
            .addFilterBefore(corsFilter, UsernamePasswordAuthenticationFilter.class)
            .exceptionHandling()
            .authenticationEntryPoint(problemSupport)
            .accessDeniedHandler(problemSupport)
            .and()
            .headers()
            .xssProtection()
            .and()
            ..... 

3. Review the application.yml property

security:
    content-security-policy:

4. Allow .png, .jpg, .jpeg only, change the component to upload images to accept only these types
5. Use angular sanitize to validate content

[c3s4rfred]

I think that we must add only CSP because the usage of XSS headers is non-standard and deprecated in some browsers as this documentation says: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-XSS-Protection

[jdieguez89]

@c3s4rfred

CSP is currently in use by the application. We need to modify the CSP settings to the following:

content-security-policy: "default-src 'self'; frame-src 'self' data:; script-src 'self' https://storage.googleapis.com; style-src 'self'; img-src 'self' data:; font-src 'self' data:"

check the configuration file at backend/src/main/resources/config/application.yml.

Please check the header Content-Security-Policy has been added to the NGINX.
add_header Content-Security-Policy "default-src 'self'; frame-src 'self' data:; script-src 'self' https://storage.googleapis.com; style-src 'self'; img-src 'self' data:; font-src 'self' data:" always;