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
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.
n/a
Show commandsStart 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:
changes
Comments
Comment #2
balintbrewsComment #3
balintbrewsComment #4
balintbrewsComment #5
balintbrewsComment #6
wim leersArrrghhhhh! 😭
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.Comment #7
wim leersI'll take this on.
Comment #8
balintbrews@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.
Comment #9
wim leersHah, just connected that independently of you 😅 Please use the field 🙏
Comment #13
longwaveThe
forbidden_key_characterscheck can be refactored, will continue with that here as I think it makes sense, but done here for today.Comment #14
longwaveComment #15
longwaveComment #17
penyaskitoComment #19
penyaskitoThanks!
Comment #21
wim leersThis introduced a regression for SDCs.
#3516602: SDC `enum` props should have human-readable labels: use `meta:enum` made the presence of human-readable labels a hard requirement for SDCs. This relaxed that.
If #3516602 had added an explicit test for an invalid SDC, then this would've been caught. E.g. the
canvas_test_sdc.cardSDC could have an invalid sibling implementation that contains:This SDC would then not be eligible for use in Canvas.
Comment #22
wim leersComment #23
longwaveSee latest MR comment; the
meta:enumcheck was previously bypassed for SDCs - was this an accident, or by design? The link to #3528998: Follow-up: SDC `enum` props should have translatable labels: use `meta:enum` implies it is by design, but I'm not sure what Canvas's intent is here.Comment #24
wim leers@longwave is right — this is something #3516602: SDC `enum` props should have human-readable labels: use `meta:enum` failed to correctly do, despite it explicitly being the intent. It ended up only working for code components.
Would you mind opening the issue + an MR for this, @longwave? You've most recently touched these LoC and are very likely to have a specific implementation in mind 😇
Comment #25
wim leersThe
bit in
tests/modules/canvas_test_sdc/components/component-mismatch-meta-enum/component-mismatch-meta-enum.component.ymlwas added Nov 28, 2025. AFTER #3516602: SDC `enum` props should have human-readable labels: use `meta:enum`. Ugh, this was simply relaxed in #3515074: Shape matching MUST work with the resolved equivalents of $refs AND must be compatible with core's upcoming $ref resolving in SDCs, see https://www.drupal.org/project/canvas/issues/3515074#comment-16364196.Mea culpa 😬🙈
Comment #27
longwaveOpened #3588972: SDC `enum` props must have matching `meta:enum` labels