Skip to content

Support headers [crossOrigin and referralPolicy] in Image without src and srcSet and only remote source.uri #50778

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
anupriya13 opened this issue Apr 17, 2025 · 4 comments · May be fixed by #50799
Open

Support headers [crossOrigin and referralPolicy] in Image without src and srcSet and only remote source.uri #50778

anupriya13 opened this issue Apr 17, 2025 · 4 comments · May be fixed by #50799
Labels
Component: Image Needs: Triage 🔍 Newer Patch Available

Comments

@anupriya13
Copy link

anupriya13 commented Apr 17, 2025 •
edited
Loading

Problem Description

Implement the crossOrigin property for Image in RNW Fabric when only source.uri is passed and not src/ srcSet.

For reference, check the public API documentation: https://reactnative.dev/docs/image#crossorigin

Implement the referrerPolicy property for Image in RNW Fabric when only source.uri is passed and not src/ srcSet.

For reference, check the public API documentation: https://reactnative.dev/docs/image#referrerpolicy

Also refer docs for source, src, srcSet
https://reactnative.dev/docs/image#source
https://reactnative.dev/docs/image#src
https://reactnative.dev/docs/image#srcset

It's not mentioned in the doc that when src / srcSet is missing then crossOrigin / referralPolicy would be ignored when source uri is a remote URL that is passed.

Currently these were ignored if src / srcSet was not passed and not added to sources headers.

This change adds headers support even without passing src / srcSet and only sources uri that consists of remote URL.

crossOrigin and referrerPolicy are passed as source.headers here:

Image

Steps to reproduce

 <Image
              defaultSource={{uri: this.state.defaultImageUri}}
              source={{uri: this.state.imageUri}}
              crossOrigin="use-credentials"
              referrerPolicy="no-referrer"
            />

Pass this in React Native and check source headers

React Native Version

0.78.0

Affected Platforms

Build - Windows, Build - MacOS, Runtime - Desktop, Runtime - Web, Runtime - iOS, Runtime - Android

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
  Memory: 24.59 GB / 63.95 GB
Binaries:
  Node:
    version: 18.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.8.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.17763.0
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.13.35828.75 (Visual Studio Enterprise 2022)
    - 17.13.35828.75 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Stacktrace or Logs

info Fetching system and libraries information...
System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
  Memory: 24.59 GB / 63.95 GB
Binaries:
  Node:
    version: 18.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.22
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.8.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.17763.0
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.13.35828.75 (Visual Studio Enterprise 2022)
    - 17.13.35828.75 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Reproducer

https://snack.expo.dev/L-KZaUnwFYfjVNb8cMxOh

Screenshots and Videos

No response
@react-native-bot
Copy link
Collaborator

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.78.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@react-native-bot
Copy link
Collaborator

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@anupriya13
Copy link
Author

I have tried this fix here: microsoft/react-native-windows#14521

This was referenced Apr 17, 2025
Closed
Open
@anupriya13
Copy link
Author

Please review this PR for this fix in react-native: #50799

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component: Image Needs: Triage 🔍 Newer Patch Available
Projects
None yet
Milestone
No milestone
2 participants
@react-native-bot @anupriya13