Overview

It's currently possible to create a JavaScript component config entity with an invalid example image prop value by using a relative path. An error happens later when the component is being loaded:

Default images for Javascript Components must be a fully-qualified URL with both scheme and host.

component.yml shape to reproduce the issue:

name: Image URL repro
machineName: image_url_repro
props:
  properties:
    image:
      type: object
      $ref: json-schema-definitions://canvas.module/image
      title: Image
      examples:
        - src: ./hero.jpg
          alt: Example image

Proposed resolution

Move JavaScript specific checks to JavaScriptComponent::checkRequirements() which is called during discovery. This delegates to ComponentMetadataRequirementsChecker::check() for the unified checks, but can also do additional checks for code components - this image src check, the component name check, and then we can add #3587211: Empty strings are incorrectly allowed as example string prop values in JavaScript component config schema here too.

#6 mentions that SDCs are affected, but SDCs allow relative images by design, because they are considered relative to the SDC itself. We even have explicit code to handle this in SingleDirectoryComponent::rewriteExampleUrl(). I don't think we can or should break this feature, SDCs can continue to provide local images.

User interface changes

n/a

Issue fork canvas-3586958

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

balintbrews created an issue. See original summary.

balintbrews’s picture

balintbrews’s picture

Issue summary: View changes
balintbrews’s picture

Issue summary: View changes
balintbrews’s picture

Title: JavaScript component config schema validation allows invalid example image prop values » Relative image paths are incorrectly allowed as example image prop values in JavaScript component config schema
wim leers’s picture

Component: … to be triaged » Component sources
Issue tags: +validation, +Needs tests

Arrrghhhhh! 😭

We did #3508725: ComponentMetadataRequirementsChecker::check() should validate that the example(s) actually match the JSON schema already because core didn't do #3493082: SDC does not respect JSON Schema validation (one of many Canvas-surfaced gaps in core's SDC implementation: #3462705: [META] Missing features in SDC needed for XB).

AFAICT this means that both SDCs and code components are affected, and the problem is not config schema, but \Drupal\canvas\ComponentMetadataRequirementsChecker. That's where examples are validated, because core's SDC implementation fails to validate them.

wim leers’s picture

Title: Relative image paths are incorrectly allowed as example image prop values in JavaScript component config schema » Relative image paths are incorrectly allowed as example image prop values in SDCs and code component example values
Assigned: Unassigned » wim leers

I'll take this on.

balintbrews’s picture

@wim leers — Thank you! Just so you're aware, we have another similar issue that's been causing troubles: #3587211: Empty strings are incorrectly allowed as example string prop values in JavaScript component config schema.

wim leers’s picture

Hah, just connected that independently of you 😅 Please use the Related issues field 🙏

gauravvvv made their first commit to this issue’s fork.

longwave made their first commit to this issue’s fork.

longwave’s picture

Assigned: wim leers » longwave
Status: Active » Needs work
Issue tags: -Needs tests

The forbidden_key_characters check can be refactored, will continue with that here as I think it makes sense, but done here for today.

longwave’s picture

Assigned: longwave » Unassigned
Status: Needs work » Needs review
longwave’s picture

Issue summary: View changes