Cross-Origin Request Blocked in firefox for Angular rum js

Elastic Observability APM
1

Hi,

I have an angular frontend application and enabled elastic APM in the app.
It works perfect in Chrome and sends events to the APM server and also distributed tracing origin to the backend API works.

But when the frontend is opened from firefox, I'm getting the following error in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://apmserver:8200/intake/v2/rum/events. (Reason: CORS request did not succeed).
And not a single event is visible in APM.

I've already changed the "security.fileuri.strict_origin_policy" setting in about:config to false, but that did not help.
So, why does it work in Chrome and Edge, but not in firefox.

Kibana version: 7.8.1

Elasticsearch version: 7.8.1

APM Server version: 7.8.1

APM Agent language and version: elastic/apm-rum-angular 1.1.2

Browser version: Firefox 80.0.1

2

Hi @PeterDK

Could you please check if you have correctly configured the APM server. Please check this document https://www.elastic.co/guide/en/apm/server/7.9/configuration-rum.html#configuration-rum

Let us know if the issue persists still.

Thanks,
Vignesh

3

Hi @vigneshshanmugam

Because it's an APM QA server where I'm testing this, I left the default configuration for RUM even with all its documentation:

#---------------------------- APM Server - RUM Real User Monitoring ----------------------------

# Enable Real User Monitoring (RUM) Support. By default RUM is disabled.
# RUM does not support token based authorization. Enabled RUM endpoints will not require any authorization
# token configured for other endpoints.
rum:
enabled: true

event_rate:

  # Defines the maximum amount of events allowed to be sent to the APM Server RUM
  # endpoint per IP per second. Defaults to 300.
  limit: 300

  # An LRU cache is used to keep a rate limit per IP for the most recently seen IPs.
  # This setting defines the number of unique IPs that can be tracked in the cache.
  # Sites with many concurrent clients should consider increasing this limit. Defaults to 1000.
  lru_size: 1000

#-- General RUM settings

# A list of permitted origins for real user monitoring.
# User-agents will send an origin header that will be validated against this list.
# An origin is made of a protocol scheme, host and port, without the url path.
# Allowed origins in this setting can have * to match anything (eg.: http://*.example.com)
# If an item in the list is a single '*', everything will be allowed.
allow_origins : ['*']

# Regexp to be matched against a stacktrace frame's `file_name` and `abs_path` attributes.
# If the regexp matches, the stacktrace frame is considered to be a library frame.
library_pattern: "node_modules|bower_components|~"

# Regexp to be matched against a stacktrace frame's `file_name`.
# If the regexp matches, the stacktrace frame is not used for calculating error groups.
# The default pattern excludes stacktrace frames that have a filename starting with '/webpack'
exclude_from_grouping: "^/webpack"

# If a source map has previously been uploaded, source mapping is automatically applied.
# to all error and transaction documents sent to the RUM endpoint.
source_mapping:

  # Sourcemapping is enabled by default.
  enabled: true

  # Source maps are always fetched from Elasticsearch, by default using the output.elasticsearch configuration.
  # A different instance must be configured when using any other output.
  # This setting only affects sourcemap reads - the output determines where sourcemaps are written.
  #elasticsearch:
    # Array of hosts to connect to.
    # Scheme and port can be left out and will be set to the default (`http` and `9200`).
    # In case you specify and additional path, the scheme is required: `http://localhost:9200/path`.
    # hosts: ["localhost:9200"]

    # Protocol - either `http` (default) or `https`.
    #protocol: "https"

    # Authentication credentials - either API key or username/password.
    #api_key: "id:api_key"
    #username: "elastic"
    #password: "changeme"

  # The `cache.expiration` determines how long a source map should be cached before fetching it again from Elasticsearch.
  # Note that values configured without a time unit will be interpreted as seconds.
  cache:
    expiration: 5m

  # Source maps are stored in a separate index.
  # If the default index pattern for source maps at 'outputs.elasticsearch.indices'
  # is changed, a matching index pattern needs to be specified here.
  index_pattern: "apm-*-sourcemap*"

The only thing that is "missing" is the allow_headers part, but according to the documentation it will take the default headers.

The thing is that this config works when I run the app in Chrome or Edge. So, I think it's something related to firefox: some (security) setting that needs to be changed in firefox or that the apm rum agent sends an extra header that firefox doesn't allow and chrome does.
If extra "allow_headers" are needed in the apm-server.yml, I can add them but I need to know which of course.

Kind regards,
Peter

4

Interesting, Can you check and paste the HTTP Request and Response headers for the failed request?

However, this could also be related to the self signed certificate issue mentioned here https://stackoverflow.com/a/24383474

Thanks,
Vignesh

1 Like
5

The stackoverflow post led to the right solution: internal certificates.
It was the security.enterprise_roots.enabled setting in "about:config" that was set to false.
Changing it to true, solved the issue.

Thanks!

6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.